使用 jQuery 检测表单输入的自动完成

Question

我有一个表单可以检测每个 keyup() 和 focus() 上的所有文本字段是否有效；如果它们全部有效，它将启用提交按钮供用户按下。但是，如果用户使用浏览器自动完成功能填写文本输入之一，则会阻止启用提交按钮。

有没有一种方法可以使用 jQuery 检测任何输入是否已更改，无论其如何更改？

Answer 1

您可以尝试使用 on input 来检测 < 中基于文本的更改（ctrl 和 shift 等键除外） /代码> 的。

例如：

$(input).on('input', function() { 
    console.log($(this).val()); 
});

Answer 2

jQuery 更改事件只会在模糊时触发。 keyup 事件将在您键入时触发。单击自动完成选项时都不会触发。我也在寻找一种方法来检测这个问题，但我目前正在使用

$(selector).bind("change keyup",function(){
    //Do something, probably with $(this).val()
});

但它并不能完全解决问题......

Answer 3

我自己用的

$(selector).on("change keyup blur input", function() {});

Chrome 就成功了。 input 使其能够自动完成。

Answer 4

我的问题是检测自动填充（通过 Lastpass 或 1password 等插件）以及上述问题。

对我有用的解决方案是：

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

查看 JSFiddle 中的演示。

Answer 5

您可以使用 jQuery .change() 函数。

页面初始加载后，您可以验证整个表单，只是为了检查它实际上没有填写。之后您可以使用 .change() 检查表单上的内容是否已更改，如果有更改，请再次验证表单。

$(document).ready(function() {
   // validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<script type="text/javascript">     
    $('.target').change(function() {
        alert('Something changed');
        // Try validating form again (if valid, activate submit button)
    });
</script>

---

B 计划

另一种选择是始终让提交按钮可点击，但使用 .submit() 将其绑定到表单验证器。如果表格有效，则继续。如果表单无效，请使用 .preventDefault() 来停止提交表单......并且您还会显示一条警告消息，指示缺少的字段。

Answer 6

答案已在 这个< /a> 问题。它不使用 jQuery，但适用于自动完成：

使用 js onpropertychange 事件。

Answer 7

遇到同样的问题后我有一个不错的解决方案。将 keyup 设置为正常的表单字段，然后将鼠标悬停到周围的 div。因此，一旦单击自动完成选项，鼠标将位于 div 顶部：

$("#emailaddress").bind("keyup", function() {
    displayFullSubcribeForm();
});

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});

Answer 8

我希望在一个字段上获得非常好的用户体验，只要用户相当活跃（例如仍在填写该字段），该字段就不会无效（在我的情况下变成红色）。

为了对正常输入执行此操作，我能够使用 debounce 函数连接到 keyup，同时连接 blur 进行立即验证。虽然 keyup 似乎是由 Lastpass 触发的，但由于我已经对其进行了反跳，因此验证存在延迟。感谢@peter-ajtai，我尝试添加 change 事件，它确实捕获了最后一次传递，而忽略了其他细节。

Coffeescript 示例：

<代码>
@fieldExp
.keyup($.debounce(@_onExpChange, 3000))
.blur(@_onExpChange)
.change(@_onExpChange)

这很有效，最后一次填写表单会立即触发验证。

Answer 9

这是最终的解决方案，保证有效

$(document).bind('mouseover', function(){
        liveValidate();
    });