Question

我正在尝试实现一个简单的“显示密码”切换复选框，以便在按住鼠标的同时显示纯文本密码，一旦它被释放，它将恢复为密码字段。

我已经切换了input字段，但是我使用复选框来显示切换状态，我可以查看mousedown上的复选框但是我的尝试然后取消选中该框并不是很有效。

这是我到目前为止所得到的;

var pwi = $('#new_pass');

$('.pw_show').on('mousedown', function () {
    $('.pw_show input').prop('checked', true);
    pwi.prop('type', 'text');
});

$('.pw_show').on('mouseup', function () {
    pwi.prop('type', 'password');
    setTimeOut(function() {
        $('.pw_show input').prop('checked', false);
    }, 50);
});

这个几乎有效，但是如果用户快速双击，那么他们可以打破它，并选中复选框。有更好的方法吗？

Answer 1

使用此：

$(".pw_show input").attr("checked","");

Answer 2

它可以正常工作，但这仅适用于.pw_show。因此，如果您mouseup位于另一个图层，则无效。我注意到你的输入没有稳定的宽度。

您可以使用removeAttr：

$(".pw_show input").removeAttr("checked");

Answer 3

使用jquery中的change事件来检查复选框，根据您更改文本框类型

    var pwi = $('#new_pass');
      $('.pw_show').find("input[type=checkbox]").on('change', function () {
           pwi.prop("type", (this.checked) ? "text" : "password");

      });

UPDATED DEMO

如果你想要mousedown和鼠标，请像这样使用

 var pwi = $('#new_pass');

$('.pw_show').find("input[type=checkbox]").mousedown('change', function () {
    pwi.prop("type",  "text" );

});
$('.pw_show').find("input[type=checkbox]").mouseup('change', function () {

    pwi.prop("type",  "password");

});

USING MOUSEDOWN/MOUSEUP

Answer 4

我的代码的问题是setTimeout函数的拼写。修复此问题后，我添加的小延迟允许在点击保持和释放时选中复选框并取消选中。

$('.pw_show').on('mouseup', function () {
    pwi.prop('type', 'password');
    setTimeout(function() {
        $('.pw_show input').prop('checked', false);
    }, 50);
});

Fixed Fiddle

JavaScript - 取消选中mouseup上的复选框

4 个答案:

UPDATED DEMO

USING MOUSEDOWN/MOUSEUP