javascript 用户名实时更改中 keyup() 事件和 change() 事件之间的差异

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

提问by Michael Kuan

• username html field

  Username: <input type="text" name="username" id="username" />
  

• keyup() event

  $(document).ready(function(){
          $('#username').on('keyup', function(){
             var username = $("#username").val();
             alert(username);
          });
  });
  

• change() event

  $(document).ready(function(){
          $("#username").change(function() {
             var username = $("#username").val();
             alert(username);
          });
  });
  

• My question is should I use keyup()event or change()event to do username verification?

• 用户名 html 字段

  Username: <input type="text" name="username" id="username" />
  

• keyup() 事件

  $(document).ready(function(){
          $('#username').on('keyup', function(){
             var username = $("#username").val();
             alert(username);
          });
  });
  

• 更改（）事件

  $(document).ready(function(){
          $("#username").change(function() {
             var username = $("#username").val();
             alert(username);
          });
  });
  

• 我的问题是我应该使用keyup()事件还是change()事件来进行用户名验证？

回答by Drazzah

They are almost the same thing. In jQuery or JavaScript, I would have to recommend the change()event. The reason you should not use keyup()is because if a user inputs a value using autofill, it will not fire the keyup()event.However, autofill doesfire the change()event, and your verification script will run, and the input will be verified.

它们几乎是同一回事。在 jQuery 或 JavaScript 中，我不得不推荐该change()事件。 你不应该使用的原因keyup()是因为如果用户使用自动填充输入一个值，它不会触发keyup()事件。但是，自动填充确实会触发该change()事件，并且您的验证脚本将运行，并且输入将被验证。

NOTE: Normally, change()is fired when the element loses focus. If you want to check data after every key press, you could combine keyup()and change(), which would allow you to parse the data on both events. This is the best of both worlds in my opinion.

注意：通常，change()当元素失去焦点时会触发。如果您想在每次按键后检查数据，您可以组合keyup()和change()，这将允许您解析两个事件的数据。在我看来，这是两全其美的。

Hope this helps!

希望这可以帮助！

回答by Nabil Kadimi

Use keyupwith debouncing, it's more user friendly.

将keyup与 debounceing 结合使用，更加用户友好。

---

---

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/

当用户释放键盘上的一个键时，keyup 事件被发送到一个元素。它可以附加到任何元素，但事件只发送到具有焦点的元素。可聚焦元素可能因浏览器而异，但表单元素始终可以获得焦点，因此对于这种事件类型来说是合理的候选者。-- 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 inputelements, textareaboxes and selectelements. 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/

当元素的值发生变化时，将更改事件发送到元素。此事件仅限于input元素、textarea框和select元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时会立即触发该事件，但对于其他元素类型，该事件会推迟到该元素失去焦点时。-- 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.

使用 keyup 和 debounced 回调这样您的验证过程不会在每次击键后触发，但只有在用户停止输入时才会触发，请查看此示例：http: //codepen.io/desandro/full/JDugF，打开页面，打开 javascript 控制台，然后开始滚动。