浏览器自动填充数据时的“启用"按钮 [英] Enable button when browser fills data automatically

问题描述

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

上面给出的是小提琴.

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

I have a simple login form. Username, password textfield & a submit button. Submit button is kept disabled until both username & password is entered. And I have successfully done that using the jQuery function given below.

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>

您知道，当用户输入其凭据并提交按钮时，网络浏览器会要求您存储密码&如果用户单击是"，则其密码&用户名存储在浏览器中.因此，下一次，当他访问该页面时，他的用户名&密码已填写在文件中.现在出现了问题，即使Web浏览器(chrome，firefox)自动为用户填写了表单，该按钮仍处于禁用状态.为了启用该按钮，用户需要输入用于启用该按钮的字段中的任何一个字段(甚至单个字母).从技术上来讲，这是不对的.由于数据已经(通过浏览器)填写在表单中，因此必须启用该按钮.有什么建议可以使它像这样吗?

You know when a user enters his credentials and submits the button, web browsers ask for storing password & if the user clicks yes, his password & username is stored in the browser. So the next time, when he visits the page, his username & password is already filled in the filed. Now comes the problem, even though the web browser (chrome, firefox) automatically filled in the form for the user, the button is still disabled. For enabling the button, user needs to enter any one of fields (even a single alphabet) of the fields for enabling that button. Technically speaking, this is not right. As data is already filled in the form (by the browser), the button has to be enabled. Any suggestions to make it as like that???

推荐答案

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

  Explanation

  • The first part is an example of extending the jQuery prototype object, has_value() method is added, and since that method is now part of jQuery it can be called as any other method on collection of DOM elements. This method filters elements by value, and returns true if there are no elements with empty value.

    要成功监视输入字段中的更改，必须至少使用两个事件change和keyup. for用户名和密码的输入元素已绑定到这两个事件.当元素失去焦点时，将触发Change事件；当用户释放键时，将触发keyup.

    To successfully monitor the changes in the input fields, at least two events, change and keyup, must be used. Input elements the for username and password are bound to that two events. Change event is fired when element loses focus, and keyup is fired when user releases a key.

    事件处理程序启用或禁用按钮，以使用jQuery建议的.prop()方法设置Disabled属性，以避免行为不一致.

    Event handler enables or disables the button, to do that it sets the disabled property with .prop() method, recommended by jQuery to avoid inconsistent behaviors.

    此代码应放在 domready 事件中，在哪里可以立即触发更改事件并测试浏览器是否自动填充了这些字段.

    This code should be placed inside the domready event, where can we immediately fire the change event and test whether the fields are auto-filled by browser.

    FIDDLE

    FIDDLE

    由于Web浏览器的不一致，您不能依靠浏览器自动完成输入字段时触发更改事件.有一个简单的解决方法可以使用 setInterval() 该功能将定期监视更改.由于我们只处理几个输入字段的小型表单，因此可以安全地使用它，而不会出现明显的延迟.

    Because of inconsistencies of web browsers, you can't rely that the change event will be triggered when browser autocompletes an input field. There is a simple workaround to use the setInterval() function that will monitor for changes at regular intervals. Since we are dealing with small form with only a couple of input fields it can be used safely without noticeable lags.

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

    建议

    HTML5不是手动编写所有代码，而是 属性(任何理智的浏览器都支持)可完成所有操作.此属性指定用户在提交表单之前必须填写一个值.如果任何必填字段为空，浏览器将阻止表单提交，并且用户还将收到通知以填写该字段.

    Suggestion

    Instead of writing all that code manually, HTML5 required attribute ( supported by any sane browser ) does all that. This attribute specifies that the user must fill in a value before submitting a form. Browser will prevent form submission if any required field is empty, and the user will also get a notification to fill that field.

    jQuery扩展: jQuery.fn.extend()
    jQuery事件: .change() .prop() 浏览器自动填充，必填属性
    

    jQuery extend: jQuery.fn.extend()
    jQuery events: .change() .keyup()
    jQuery properties: .prop() .prop() vs .attr():
    Autocomplete: Browser Autofill, Autocomplete and JavaScript Change Event
    HTML5: required attribute
    

    这篇关于浏览器自动填充数据时的“启用"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！