Differences between keyup() event and change() event in username live change

Question

• username html field

  Username: 
  

• keyup() event

Answer 1

Use keyup with debouncing, it's more user friendly.

---

keyup

Whenever you release a key.

The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type. -- http://api.jquery.com/change/

---

change

Whenever the content of that field changes, generally, it happens when you remove focus from that field, but not only that.

The change event is sent to an element when its value changes. This event is limited to input elements, textarea boxes and select elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus. -- http://api.jquery.com/change/

---

Use keyup and a debounced callback So that you verification process isn't fired after each key stroke, but only if the user stops typing, check this example: http://codepen.io/desandro/full/JDugF, open the page, open the javascript console, and start scrolling.