浏览器自动填充数据时的启用按钮 - Enable button when browser fills data automatically

http://jsfiddle.net/jy3UR/2/

上面给出的是小提琴。

我有一个简单的登录表单。用户名，密码文本字段和提交按钮。提交按钮保持禁用状态，直到输入用户名和密码。我已经使用下面给出的jQuery函数成功地做到了这一点。

var $input = $('input'),
$register = $('#signin');
$register.attr('disabled', true);
$input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});

下面是我的表格。

<div class="form-group">
    <label for="txtusername" class="col-sm-4 control-label">Username</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" id="txtusername" name="txtusername" placeholder="Username">
    </div>
</div>
<div class="form-group">
    <label for="txtpassword" class="col-sm-4 control-label">Password</label>
    <div class="col-sm-8">
        <input  type="password" class="form-control" id="txtpassword" name="txtpassword" placeholder="Password">
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
        <div class="checkbox">
            <label><input type="checkbox">Remember me</label>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
        <button type="submit" id="signin" class="btn btn-default"  >Sign in</button>
</div>

你知道当用户输入他的凭据并提交按钮时，网络浏览器会要求存储密码，如果用户点击是，他的密码和用户名将存储在浏览器中。所以下次，当他访问该页面时，他的用户名和密码已经填写在文件中。现在问题来了，即使网络浏览器(chrome，Firefox(自动为用户填写了表单，该按钮仍然被禁用。要启用该按钮，用户需要输入用于启用该按钮的字段中的任何一个字段(甚至是单个字母(。从技术上讲，这是不对的。由于数据已经填写在表单中(由浏览器填写(，因此必须启用该按钮。有什么建议可以做到那样吗???

$.fn.extend({
    has_value: function() {
        return this.filter( function() {
            return $( this ).val().length == 0;
        }).length;
    }
});
var $input = $( 'input.form-control' ),
    $register = $('#signin');
$input.on( 'change keyup', function() {
    $register.prop( 'disabled', $input.has_value() );       
}); 
$input.trigger( 'change' );

解释

第一部分是扩展 jQuery 原型对象的示例，添加了has_value()方法，并且由于该方法现在是 jQuery 的一部分，因此可以像 DOM 元素集合上的任何其他方法一样调用它。此方法按值筛选元素，如果没有具有空值的元素，则返回 true。
要成功监视输入字段中的更改，必须至少使用两个事件(change 和 keyup(。用户名和密码的输入元素绑定到这两个事件。当元素失去焦点时触发更改事件，当用户释放键时触发键启动。
事件处理程序启用或禁用按钮，为此，它使用 jQuery 建议使用的方法设置禁用属性.prop()以避免不一致的行为。
这段代码应该放在 domready 事件中，我们可以在哪里立即触发 change 事件并测试字段是否被浏览器自动填充。
小提琴

浏览器自动完成

由于 Web 浏览器的不一致，您不能指望在浏览器自动完成输入字段时触发更改事件。有一个简单的解决方法可以使用setInterval()函数，该函数将定期监视更改。由于我们正在处理只有几个输入字段的小表单，因此可以安全地使用，而不会有明显的滞后。

setInterval( function() {
    $input.trigger( 'change' );
}, 100 );

建议

HTML5 required属性(任何健全的浏览器都支持(不是手动编写所有这些代码。此属性指定用户在提交表单之前必须填写一个值。如果任何必填字段为空，浏览器将阻止表单提交，并且用户还将收到填写该字段的通知。

附加信息

jQuery extend： jQuery.fn.extend((
jQuery events： .change(( .keyup((
jQuery 属性： .prop(( .prop(( vs .attr((：
自动完成：浏览器自动填充、自动完成和 JavaScript 更改事件
HTML5：必需属性

您可以添加以下代码。这样它最初将在没有任何键触发器的情况下进行检查。

$(document.ready(function(){
   $input.each(function() {
                if (!$(this).val()) {
                    trigger = true;
                }
        });
 });

你能试试这个javascript而不是你的吗？

var $input = $('input'),
$register = $('#signin');
$register.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
    if (!$(this).val()) {
        trigger = true;
    }
});
trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});
$('.form-group').on('change', function(){
  var usr_name = $('#txtusername').val().length;
  var usr_pass = $('#txtpassword').val().length;
  if(usr_name < 1 || usr_pass < 1){
    $register.attr('disabled', true);   
  }
});

这是检查 http://jsfiddle.net/vaske1986/va4Kz/的小提琴

您可以检查天气，表单在加载时和键上为空，如下所示：

$(function(){
  var $input = $('input:not(:checkbox)'),// Check box is having some value even when not checked so ommitting it.
              $register = $('button:submit');
              $register.attr('disabled', !isFilledForm());
  $input.keyup(function() {
      $register.prop('disabled', !isFilledForm())
  });
  function isFilledForm(){
      var isFilled = true;
      $input.each(function(){
        if(!$(this).val()) isFilled = false;
      })
      return isFilled
  }
})

请找到更新的小提琴，其中我故意为密码字段提供了值，以便在任何输入中显示预填充值。正在启用登录按钮。

更新的小提琴

更新了仅当两个字段都填充时才启用登录按钮的小提琴

修改后的小提琴将所有内容都保留在document.ready中。

我已经在浏览器中检查过了。希望这有帮助。

$(document).ready(function() {
    checkLoginStats();
    $("#txtusername").attr("onkeyup","checkLoginStats();");
    $("#txtpassword").attr("onkeyup","checkLoginStats();");
});
function checkLoginStats()
{
    var userName   = $("#txtusername").val();
    var userPass   = $("#txtpassword").val();
    var buttonStat = true;
    if(userName!="" && userPass!="")
    {
        buttonStat = false;
    }
    $("#signin").attr("disabled",buttonStat);
}

希望这可能会成功http://jsfiddle.net/jy3UR/8/

一些注意事项：

如果要动态更改disabled状态，最好使用属性，而不是属性。
您可以轻松使用every而不是循环each .
当jQuery不能简化你的代码时，考虑使用更快的vanilla-js。
如果您收听keyup而不是input事件，则不会注意到用户是否使用鼠标更改了字段。

工作 ES5 代码：

var inputs = [].slice.call(document.getElementsByTagName('input')),
    register = document.getElementById('signin');
function check() {
    register.disabled = !inputs.every(function(inp) {
        return inp.value;
    });
}
$(inputs).on('input', check);
check();

演示

可能是您在输入的键控事件中删除按钮的"禁用"属性的原因。在用户手动填写表单的情况下，这是可以的。但是，如果浏览器自动填充输入，则必须检查文档就绪事件上的输入值，并根据结果将禁用属性应用于按钮。下面是一个例子：

$(document).ready(function(){
  HandleButtonState();
  $input.keyup(function() {
      HandleButtonState();
  });
}); 
function HandleButtonState(){
    var trigger = false;
    $input.each(function() {
       if (!$(this).val()) {
          trigger = true;
       }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
}

只是输入的触发键UP功能

$("input").keyup();

就这么简单

它将触发文本框的 Key Up 事件(不会向 TextBox 添加任何数据(，因此您的 KeyUp 代码将检查文本框是否填充了数据并使按钮启用

小提琴链接演示

完整代码

  $(document).ready(function () {
     var $input = $('input'),
        $register = $('#signin');
        $register.attr('disabled', true);
        $input.keyup(function() {
            var trigger = false;
            $input.each(function() {
                if (!$(this).val()) {
                    trigger = true;
                }
            });
            trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
        });
        $("input").keyup();
    })

试试我的小提琴...

http://jsfiddle.net/jy3UR/13/

我已经设置了一个超时，如果您将此脚本放在正文结束标签"之前，它将在页面加载后 2 秒触发。

 var $input = $('input'), $register = $('#signin');
$register.attr('disabled', true);
$input.keyup(function() {
    validateForm();
});
var validateForm = function (){
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
};
setTimeout(validateForm(), 2000);

我已经在这里更新了小提琴上的代码：

http://jsfiddle.net/jy3UR/14/

var $input = $('input'),
            $register = $('#signin');
            $register.attr('disabled', true);
var checkInput = function(){
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
}
$input.keyup( function(){
    checkInput();
} );
$(document).ready( function(){
    checkInput(); 
} );

并检查代码是否正常工作。

更改的简要说明：

以前，您只检查 keyup 事件的表单值状态。现在，我们也在文档准备就绪时对其进行检查。整个条件被检查了两次，这就是为什么它现在被放置在一个函数中。

调试：

我已经在输入上放置了值字段并预填充了用户名字段。您可以填充密码字段，并检查如果两个字段都已填充，则该按钮是否已启用。反之亦然，如果没有输入或只填充了一个字段，则该按钮将保持禁用状态。

使用以下 JavaScript 代码

var $input = $('input'),
  $register = $('#signin');
  $register.attr('disabled', true);
  //update signin button    
  function isDisabled($input,$register){
         var trigger = false;
                    $input.each(function() {
                        if (!$(this).val()) {
                            trigger = true;
                        }
                    });
         trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
    }
 //check signin button status on window load event   
 $(window).load(function(){
         isDisabled($input,$register)
    });
//check signin button status on keyup event 
  $input.keyup(function() {
                    isDisabled($input,$register)
  });

把它放在你的jquery代码之后。确保它紧随其后

    var $input = $('input'),
    $register = $('#signin');
    $register.attr('disabled', true);
    $input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
   });

   $('.form-group > input').on('input', function () {
        var empty = false;
        $('form > input, form > select').each(function () {
            if ($(this).val() == '') {
                empty = true;
            }
        });
        if (empty) {
            $('#signin').attr('disabled', 'disabled');
        } else {
            $('#signin').removeAttr('disabled');
        }
    });

试试这个，看看你是否得到想要的结果

检查这个小提琴 http://jsfiddle.net/DaCardinal/P2c2g/

根据字段是否由 document.onload 填充，您可以检查

$(document).ready(function () {
  // trigger validation
});

如果为时过早，恐怕您只能尝试添加超时(window.setTimeout()(，如果这对您也不起作用，您可能会解决向输入字段添加autocomplete="off"的问题。

在

文档加载时编写代码，请使用$(document).ready(function(){ /*your validation code*/})

var hasUsername = false
  , hasPassword = false;
$('#password').on('keyup', function(e){
    var val = $(this).val();
    if ( val.length > 8 ) {
        hasUsername = true;
    }
    checkButton();
});
$('#password').on('keyup', function(e){
    var val = $(this).val();
    if ( val.length > 8 ) {
        hasPassword = true;
    }
    checkButton();
});
function checkButton(){
    if ( hasUsername && hasPassword ) {
        $("button").attr('disabled', false);
    }
}

我已经修改了你的代码，这是新的工作演示您应该在文档加载时调用一个函数，该函数检查txtusername和password是否为空。如果它们已经在页面加载时填满，那么您应该编写一些启用按钮的代码。

注意：我在您的 HTML 内容周围添加了一个 <form> 标签

注释掉现有代码并尝试以下代码：

$(document).ready(function(){
    function check()
    {
        var txtusername = $('#txtusername').val();
        var txtpassword = $('#txtpassword').val();
        alert('txtusername = '+txtusername+' txtpassword = '+txtpassword);
        if(txtusername !="" && txtpassword != "")
        {
            $('#signin').attr('disabled', false);
        }
        else
        {
            $('#signin').attr('disabled', true);
        }
    }    
    var $input = $('input');
    $input.keyup(function() {
        check();
    });
    check();
});