JavaScript-取消选中mouseup上的复选框 [英] JavaScript - uncheck check box on mouseup

问题描述

我正在尝试实现一个简单的显示密码"切换复选框，以便在按住鼠标的同时显示纯文本密码，放开它后，它会恢复为密码字段.

I'm trying to implement a simple 'show password' toggle check box so that whilst the mouse is held down, the plain text password is shown, and once it's let go it reverts back to a password field.

我已经启用了input字段的切换功能，但是我也使用了一个复选框来显示切换状态，并且我可以选中mousedown上的复选框，但是我尝试取消选中盒子工作不正常.

I've got the toggle of the input field working, however I'm using a check box to show the toggle state as well, and I can check the box on mousedown however my attempt at then unchecking the box is not quite working.

这是我到目前为止所拥有的；

Here's what I've got so far;

演示

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

此几乎有效，但是如果用户快速双击，则可以 break 取消选中该复选框. 有更好的方法吗?

This almost works, however if the user double clicks quickly then they can break it leaving the checkbox checked. Is there a better way to do this?

推荐答案

我的代码的问题是setTimeout函数的拼写.解决此问题后，我添加了一个很小的延迟，允许在单击保持并释放时选中和取消选中该复选框.

The problem with my code was the spelling of the setTimeout function. After fixing this, the small delay I added, allowed the check box to be checked and unchecked on click hold and release.

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

固定小提琴

这篇关于JavaScript-取消选中mouseup上的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！