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

Detecting autocomplete on form input with jQuery

提问by Ryan

I have a form that detects if all the text-fields are valid on each keyup() and focus(); if they're all valid, it will enable the submit button for the user to press. However, if the user fills in one of the text inputs with a browsers autocomplete feature, it prevents the submit button from being enabled.

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

Is there a way to detect if any of the input has changed regardless of how it's been changed, using jQuery?

有没有办法使用 jQuery 检测任何输入是否已更改，而不管它是如何更改的？

采纳答案by Spycho

The jQuery change event will only fire on blur. The keyup event will fire as you type. Neither fire on clicking an auto-completion option. I am also searching for a way to detect this, but I'm currently going with

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

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

But it doesn't quite solve the problem...

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

回答by cheshireoctopus

You could try using on inputto detect text-based changes (except keys like ctrland shift) in <input>'s.

您可以尝试使用on input来检测's 中基于文本的更改（除了ctrl和 之类的键shift）<input>。

For example:

例如：

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

回答by avoliva

Myself I used

我自己用过

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

which did the trick in Chrome. inputis what made it work for autocomplete.

这在 Chrome 中起到了作用。input是什么使它适用于自动完成。

回答by Justin

My issue was detecting auto-fill (via a plugin like lastpass or 1password) as well as the issue described above.

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

The solution that worked for me was:

对我有用的解决方案是：

$(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.

请参阅 JSFiddle 中的演示。

回答by kross

I wanted a very good user experience on a field where it would not be invalid (turn red in my case) as long as the user was reasonably active e.g. still filling out the field.

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

To do this for normal input, I was able to hook up to keyupwith a debouncefunction, while bluris connected for immediate validation. While it appears that keyupis triggered by lastpass, since I have debounced it, there was a delay in validation. Thanks to @peter-ajtai I tried to add the changeevent and it indeed catches last pass and leaves the other niceties alone.

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

Coffeescript example:

咖啡脚本示例：

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

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

This worked well and lastpass form fill triggers immediate validation.

这很有效，并且 lastpass 表单填写会触发立即验证。

回答by Yehuda Shapira

The answer has been given in thisquestion. It doesn't use jQuery, but it works for Autocomplete:

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

Use js onpropertychangeevent.

使用jsonpropertychange事件。

回答by James Wilson

I have a decent solution after having the same problem. Set keyup as normal to our form fields, then mouseover to the surrounding div. So once you click the autocomplete option, you mouse will be over the top of the div:

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

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

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

回答by Peter Ajtai

You could use the jQuery .change()function.

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

After the page initially loads, you can validate the entire form, just to check that it is in fact not filled in. After that you can use .change()to check if things have changed on the form, and if anything has changed, validate the form again.

页面最初加载后，您可以验证整个表单，只是为了检查它实际上没有填写。之后您可以使用.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>

---

---

Plan B

B计划

Another option is to always have the submit button clickable, but use .submit()to bind it to the form validator. Then if the form IS valid, carry on. If the form IS NOT valid use .preventDefault()to stop the submission of the form..... and you'd display a warning message too, indicating the missing fields.

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

回答by StillLearningGuy

this is the ultimate solution, guaranteed to work

这是最终的解决方案，保证工作

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