Question

我正在尝试通过单击复选框在密码文本区域中显示纯文本。我有一个文本框的工作，但我想让它与这两个工作，这是我到目前为止的代码：

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>

<title>None</title>

<script type='text/javascript'>//<![CDATA[
$(function(){
//Place this plugin snippet into another file in your applicationb
(function ($) {
    $.toggleShowPassword = function (options) {
        var settings = $.extend({
            field: "#password",
            control: "#toggle_show_password",
        }, options);

        var control = $(settings.control);
        var field = $(settings.field)

        control.bind('click', function () {
            if (control.is(':checked')) {
                field.attr('type', 'text');
            } else {
                field.attr('type', 'password');
            }
        })
    };
}(jQuery));

//Here how to call above plugin from everywhere in your application document body
$.toggleShowPassword({
    field: '#password1',
    field: '#password2',
    control: '#checkbox1'
});
});//]]> 

</script>

</head>    
<body>

Password: <input type="password" id="password" value="a" />

Password 2: <input type="password" id="password2" value="a" />

<input id="checkbox1" type="checkbox" />Show password

</body>
</html>

Answer 1

不要覆盖field选项（定义两次），而是将两个输入ID放入其中：

$.toggleShowPassword({
    field: '#password, #password2',
    control: '#checkbox1'
});

Answer 2

请参阅此fiddle

首先，如果您定义一个具有相同属性名称多次的对象，它将仅为其指定最后一个值。所以

$.toggleShowPassword({
    field: '#password1, #password2',
    control: '#checkbox1'
});

会解决它。

其次，您的第一个密码箱的ID是＆＃34;密码＆＃34;没有1.

Answer 3

你可以尝试在输入字段中添加一个类，如下所示：

Password: <input type="password" class="togglepassfield" id="password" value="a" />
Password 2: <input type="password" class="togglepassfield" id="password2" value="a" />

然后使用班级名称：

$.toggleShowPassword({
   field: '.togglepassfield',
   control: '#checkbox1'
});

在密码文本区域中显示纯文本

3 个答案: