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

Posted 2023-05-07

【中文标题】使用 jQuery 检测表单输入的自动完成

【英文标题】：Detecting autocomplete on form input with jQuery

【发布时间】：2011-03-19 20:37:12

【问题描述】：

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

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

【问题讨论】：

这里有一个解决这个问题的方法 => this

查看我的回答here

【参考方案1】：

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

例如：

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

【讨论】：

当页面加载时浏览器已经填写了凭据时，输入在 IE11 中不起作用。

【参考方案2】：

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

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

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

【讨论】：

不幸的是，我不得不对此投反对票！我对change keyup 有 90% 的良好体验，但 keyup 不会附加到 chrome-cases 中的自动填充，change 附加到自动填充只有当焦点丢失时！ Chrome 有时会将文本光标保留在输入中- 自动填充后的字段并且没有触发更改事件！也许只有 chrome 的问题......

@PeterRader：是的，我想我已经在回答中说得很清楚了。

@Spycho 如果您在username 和password 之后有第三个字段，那么每次都会为username 和password 调用change！这是达到 100% 的解决方法。

@PeterRader：太好了。将其发布为答案？

【参考方案3】：

我自己用过

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

这在 Chrome 中起到了作用。 input 是让它自动完成的原因。

【讨论】：

在 Chrome 中无法保证可靠性。如果我快速双重刷新页面，那么这不会捕获自动完成值。

【参考方案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.

【讨论】：

我知道这是旧的，但你不能用$("#email, "#password").on("keyup change", validate); 代替吗？

作为一个仅供参考 - mouseenter 被触发时，它会出现在悬停时，虽然这可能适用于密码管理器，但它看起来并不理想，因为它会在悬停时触发验证并且该字段无效（变为红色） .这很挑剔，但我不想对悬停事件给出负面反馈。仍在寻找独角兽事件以检测 lastpass fill_in。

【参考方案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() 停止提交表单.....您也会显示一条警告消息，指出缺少的字段。

【参考方案6】：

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

使用jsonpropertychange事件。

【参考方案7】：

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

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

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

【讨论】：

许多用户不使用鼠标 - 他们要么使用 Tab 来聚焦字段，要么点击它。

【参考方案8】：

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

要为正常输入执行此操作，我可以使用 debounce 函数连接到 keyup，同时连接 blur 以进行即时验证。虽然 keyup 似乎是由 lastpass 触发的，但由于我已经对其进行了去抖动，因此验证存在延迟。感谢@peter-ajtai，我尝试添加change 事件，它确实抓住了最后一关，并留下了其他细节。

咖啡脚本示例：

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

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

【参考方案9】：

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

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

【讨论】：

也在移动设备上？