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

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

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

您可以使用jQuery函数

在页面最初加载之后，您可以验证整个表单，只需检查它是否确实没有填写。之后，您可以使用检查表单上的内容是否已更改，如果有任何内容已更改，请再次验证表单

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

$（文档）.ready（函数（）{
//验证表单一次，以确保（如果有效，激活提交按钮）
});
...
选择1
选择2
$（'.target'）.change（函数（）{
警惕（‘有变化’）；
//再次尝试验证表单（如果有效，请激活提交按钮）
});

---

方案B

---

另一个选项是始终可以单击submit按钮，但使用它将其绑定到表单验证器。如果表格有效，请继续。如果表格无效，请停止提交表格。。。。。您还将显示一条警告消息，指示缺少的字段。

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

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

---

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

答案有疑问。它不使用jQuery，但适用于自动完成：

---

使用js

onpropertychange

事件。

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

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

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

---

我的问题是检测自动填充（通过类似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();
});

---

.

您可以尝试在输入时使用

来检测
中基于文本的更改（除了
ctrl
和
shift
等键）

例如：

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

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

为了对正常输入执行此操作，我可以使用
debounce
功能连接到
keyup
，同时连接
blur
进行即时验证。虽然看来，
keyup
是由lastpass触发的，但由于我已经取消了它的公告，验证过程中出现了延迟。多亏了@peter ajtai，我试着添加了
change
事件，它确实捕捉到了最后一个关卡，而忽略了其他细节

咖啡脚本示例：


@fieldExp
.keyup（$.debounce（@_onExpChange，3000））
.blur（@_onExpChange）
.change（@_onExpChange）

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

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

这在Chrome中起了关键作用<代码>输入

是使自动完成工作的原因。

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

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

---

我知道这是旧的，但你不能做

$（“#email，“#password”）。相反，在（“keyup change”，validate）

上？作为供参考的鼠标指针被触发时，它会出现在悬停状态，虽然这可能适用于密码管理器，但它看起来并不理想，因为它会触发悬停状态下的验证，并且字段无效（变为红色）。这很挑剔，但我不希望对悬停事件给出负面反馈。仍在寻找unicorn事件以检测最后一次填充。这是此问题的解决方案=>请查看我的答案，不幸的是，我不得不对此进行否决！我对

更改keyup

有90%的良好体验，但keyup没有附加到chro中的自动填充me cases和

change

只有在焦点丢失时才会附加到autofill！Chrome有时会在autofill后将文本光标保留在输入字段内，而不会触发更改事件！可能是Chrome唯一的问题…@PeterRader:是的，我想我在回答中已经说得很清楚了。@Spycho如果在

用户名之后有第三个字段，那么
密码
然后每次调用
用户名
和
密码
时都会调用
更改
！这是一个达到100%的解决办法。@PeterRader:太好了。将此作为答案发布？当浏览器在页面加载时已填写凭据时，在IE11中输入不起作用。同样在移动设备上？在Chrom中不可靠e、 如果我快速重复刷新页面，则无法捕获自动完成值。许多用户不使用鼠标-他们可以通过选项卡聚焦字段，也可以点击它。