JavaScript-取消選中mouseup上的復選框

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");

      });

更新的演示

如果要向下和向上移動鼠標，請像這樣使用

 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");

});

使用MOUSEDOWN / MOUSEUP

Answer 4

我的代碼的問題是setTimeout函數的拼寫。 解決此問題后，我添加了一個很小的延遲，允許選中復選框並在單擊保持和釋放時取消選中該復選框。

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

固定小提琴