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()事件。但是，自动填充会 strong>触发change()事件，您的验证脚本将运行，输入将被验证。

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

希望这有帮助！

Answer 2

使用 keyup 进行去抖动，它更加用户友好。

KEYUP

每当你释放一把钥匙。

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

变化

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

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

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

Answer 3

在您的情况下使用＆＃39;改变＆＃39;将是最好的，因为它将允许您检查用户名条目，因为用户实时输入用户名和＃39; keyup＆＃39;只有在用户输入用户名并按一个键后才会触发。

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

3 个答案:

KEYUP

变化