Question

我有一个应用程序，其中有一个密码字段。当用户将鼠标悬停在眼睛图标上时，我们希望将密码作为文本显示给用户。但是在某些情况下，焦点输出事件不会被调用。这就是代码的样子。 mousedown事件是否会抑制焦点输出事件。转换为文本和密码工作正常，但该值不会绑定到模型。

$(document).on('mousedown mouseup', '.passfield', function (event) {
    togglepasswordreset(event);
});

window.togglepasswordreset = function (event) {
    var element = event.currentTarget;
    if (element) {
        if (event.type == 'mousedown') {
            $(element).parent().children('input').attr('type', 'text');
        }
        else {
            $(element).parent().children('input').attr('type', 'password');
        }
    }
};

这就是html的样子

<div class="field">
    <span class="controls passfield" for="showpass"><b class="icon_eye"></b></span>
     @*<input type="checkbox" value="Show password" class="passcheckbox" id="showpass" tabindex="-1" data-bind="click:onShowPass">*@
     <label for="inputEmail" class="floatLblDn">@Resources.Password</label>
     <input type="password" class="floatTxt myStyle" id="inputPassword" name="inputPassword" data-bind="value: Password">
</div>

Answer 1

我为你写了一个帮助例子。

<强> HTML

<div>
        <input type="password" class="passfield" id="passf" />
        <label style="margin-left: -30px; background: #ffde00; cursor: pointer;"        for="#passf">See</label>
</div>

<强>脚本

<script>
    $(function() {
        $('label').click(function(event) {
        });
        $('label').mousedown(function(event) {
            $('.passfield').attr('type', 'text');
        });
        $('label').mouseup(function(event) {
            $('.passfield').attr('type', 'password');
            $('.passfield').focus();
        }); 
    });
</script>

Answer 2

您可以使用mouseover和mouseout事件。

我创建了一个jsFiddle来显示https://jsfiddle.net/uxy0def1/

只需输入密码并将鼠标悬停在“SHOW PASSWORD”文本

上

HTML

<div class="field"> <span class="controls passfield" for="showpass"><b class="icon_eye">SHOW PASSWORD</b></span>
    <input type="password" class="floatTxt myStyle" id="inputPassword" name="inputPassword" data-bind="value: Password">
</div>

的Javascript

$(document).on('mouseover', '.passfield', function (event) {
    $(this).parent().children('input').attr('type', 'text');
});

$(document).on('mouseout', '.passfield', function (event) {
    $(this).parent().children('input').attr('type', 'password');
});

Answer 3

如果用户拖到另一个元素上，.passfield可能无法触发.passfield;

如果用户点击元素外部，拖动它，然后释放按钮，这仍然被视为mouseup事件。这个顺序在大多数用户界面中，操作不被视为按下按钮，因此除非我们知道，否则通常最好使用click事件 mouseup事件适用于特定情况。

同样，mouseup event事件可能无法按预期工作;

如果用户点击某个元素，请将其拖离，然后释放该元素按钮，这仍然被视为一个mousedown事件。这个顺序在大多数用户中，操作被视为按钮按下的“取消” 接口，所以除非我们通常更好地使用click事件知道mousedown事件对于特定事件更可取情况。

在这里，我将mousedown绑定到header('application/pdf')但是在整个文档上都有鼠标。更改函数，而不是切换mouseup始终恢复为密码和mousedown设置为文本。

Answer 4

如果您希望在将鼠标悬停在某个元素上时显示密码并在其离开时隐藏，则可以使用鼠标悬停和鼠标移动事件。

Mousedown事件抑制焦点事件？

4 个答案: