Handling Forms & User Input

What's wrong with this approach to input transformation?

const input = document.querySelector('input');
Object.defineProperty(input, 'value', {
  set(v) {
    this.setAttribute('value', v.toUpperCase());
  }
});

It's perfectly valid
It breaks native input behavior
Overriding the value property of input elements breaks native functionality because: 1) It interferes with the browser's internal input handling, 2) Can break event firing and validation, 3) May cause infinite loops with input events, 4) Doesn't handle all input methods properly. Instead, use the input event to transform values: input.addEventListener('input', e => e.target.value = e.target.value.toUpperCase());
defineProperty is deprecated
setAttribute is unnecessary

Next Question (9/20)