35

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

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

4

9 回答 9

26

您可以尝试使用来on input检测' s.ctrlshift<input>

例如：

$(input).on('input', function() { 
    console.log($(this).val()); 
});
于 2014-07-14T21:15:23.707 回答
17

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

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

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

于 2011-03-17T14:52:41.103 回答
13

我自己我用过

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

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

于 2015-05-14T20:35:27.480 回答
2

我的问题是检测自动填充（通过像 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 中的演示。

于 2013-08-09T22:30:27.600 回答
0

您可以使用 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()的用于停止提交表单......并且您也会显示一条警告消息，指示缺少的字段。

于 2010-07-22T23:10:54.050 回答
0

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

使用 jsonpropertychange事件。

于 2012-06-17T09:32:16.603 回答
0

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

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

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});
于 2012-12-20T13:10:12.830 回答
0

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

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

咖啡脚本示例：

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

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

于 2015-03-17T15:24:42.247 回答
-2

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

$(document).bind('mouseover', function(){
        liveValidate();
    });
于 2015-06-23T02:59:09.610 回答