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

• 用户名html字段

  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()事件来进行用户名validation吗？

Answer 1

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

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

希望这可以帮助！

Answer 2

使用keyup与debouncing，它更加用户友好。

---

KEYUP

每当你释放一把钥匙。

当用户在键盘上释放键时，键盘事件被发送到元素。 它可以附加到任何元素，但事件仅发送到具有焦点的元素。 可聚焦元素可以在浏览器之间变化，但是表单元素总是可以获得焦点，因此这种事件类型是合理的候选者。 – http://api.jquery.com/change/

---

更改

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

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

---

使用keyup和debounced回调因此，每次击键后都不会触发validation过程，但只有当用户停止输入时，请检查以下示例： http ： //codepen.io/desandro/full/JDugF ，打开页面，打开javascript控制台，然后开始滚动。

Answer 3

在您的情况下，使用“更改”将是最好的，因为它将允许您在用户实时输入时检查用户名条目，而“密钥”将仅在用户输入用户名并按下密钥后才会触发。