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

Question

• 用户名html字段

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

• keyup()事件

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

• change()事件

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

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

Answer 1

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

注意:通常,change()元素失去焦点时会触发.如果你想每一个按键后,检查数据,你可以结合keyup()和change(),这将让你解析这两项活动的数据.在我看来,这是两全其美的.

希望这可以帮助!

Answer 2

将keyup与 debounceing 结合使用，更加人性化。

按键

每当您松开按键时。

当用户释放键盘上的键时，keyup 事件被发送到一个元素。它可以附加到任何元素，但事件只发送到具有焦点的元素。可聚焦元素可能因浏览器而异，但表单元素始终可以获得焦点，因此对于这种事件类型来说是合理的候选者。-- http://api.jquery.com/change/

改变

每当该字段的内容发生变化时，通常会在您从该字段中移除焦点时发生，但不仅如此。

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

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