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

Question

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

有没有一种方法可以使用 jQuery 来检测任何输入是否已更改，而不管它是如何更改的？

Answer 1

您可以尝试使用on input 来检测<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();
});

See demo in 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

答案已在this 问题中给出。它不使用 jQuery，但它适用于自动完成：

使用jsonpropertychange事件。

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 事件，它确实抓住了最后一关，并留下了其他细节。

咖啡脚本示例：

@fieldExp .keyup($.debounce(@_onExpChange, 3000)) .blur(@_onExpChange) .change(@_onExpChange)

这很好用，最后一次表单填充会触发立即验证。

Answer 9

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

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