Question

我一直在寻找JavaScript函数来屏蔽输入密码并在其他文本框中显示密码。

以下是我在互联网上找到的JavaScript代码

$(function() {
    //Extends JQuery Methods to get current cursor postion in input text.
    //GET CURSOR POSITION
    jQuery.fn.getCursorPosition = function() {
        if (this.lengh == 0) return -1;
        return $(this).getSelectionStart();
    }

    jQuery.fn.getSelectionStart = function() {
        if (this.lengh == 0) return -1;
        input = this[0];

        var pos = input.value.length;

        if (input.createTextRange) {
            var r = document.selection.createRange().duplicate();
            r.moveEnd('character', input.value.length);
            if (r.text == '') pos = input.value.length;
            pos = input.value.lastIndexOf(r.text);
        } else if (typeof(input.selectionStart) != "undefined") pos = input.selectionStart;

        return pos;
    }

    //Bind Key Press event with password field    
    $("#txtpwd").keypress(function(e) {
        setTimeout(function() {
            maskPassword(e)
        }, 100);
    });

});

function generateStars(n) {
    var stars = '';
    for (var i = 0; i < n; i++) {
        stars += '*';
    }
    return stars;
}

function maskPassword(e) {

    var text = $('#txthidden').val().trim();
    var stars = $('#txthidden').val().trim().length;
    var unicode = e.keyCode ? e.keyCode : e.charCode;
    $("#keycode").html(unicode);

    //Get Current Cursor Position on Password Textbox
    var curPos = $("#txtpwd").getCursorPosition();
    var PwdLength = $("#txtpwd").val().trim().length;

    if (unicode != 9 && unicode != 13 && unicode != 37 && unicode != 40 && unicode != 37 && unicode != 39) {
        //If NOT <Back Space> OR <DEL> Then...
        if (unicode != 8 && unicode != 46) {
            text = text + String.fromCharCode(unicode);
            stars += 1;
        }
        //If Press <Back Space> Or <DEL> Then...
        else if ((unicode == 8 || unicode == 46) && stars != PwdLength) {
            stars -= 1;
            text = text.replace(text.charAt(curPos), "");
        }
        //Set New String on both input fields
        $('#txthidden').val(text);
        $('#txtpwd').val(generateStars(stars));
    }
}

并且html以

的形式给出

<div id="panel">
  <input type="text" id="txtpwd" name="txtpwd" size="15"/>
  <input type="text" id="txthidden" name="txthidden" size="15"/>
  <div>
    KeyCode Pressed: 
    <span id="keycode">
    </span>
  </div>
</div>

现在，当我输入txtpwd字段时，它会转换为星号，并在txthidden文本框中打印文本值。但是当我从txtpwd文本框中删除时，它不会从txthidden中删除文本。这个演示可以在http://codebins.com/bin/4ldqp8u

找到

请让我知道如何解决它。感谢提前

Answer 1

我正在寻找javascript函数来屏蔽输入密码并在其他文本框中显示密码

在HTML5中，默认情况下为input field for passwords，因此在您输入内容时会屏蔽它。

<div id="panel">
    <input type="text" id="txtpwd" name="txtpwd" size="15"/>
    <input type="password" id="txthidden" name="txthidden" size="15"/>
<div>

Answer 2

对于删除和退格，请切换到密钥。在此演示文稿的修改版本中： http://codebins.com/bin/4ldqp8u/111

它会捕获按键没有的按键。那就差不多了。只要您尝试在中途转换字符（即在键*事件中），它仍然不是一个好的解决方案，因为任何时候任何人突出显示一个块并将它们更改为一个组，您的隐藏框将与输入不匹配输入。此外，像 Ctrl + X 切割的东西会弄乱它。鼠标单击并拖动可能会搞砸它。粘在盒子里就会搞砸了。等

输入密码

2 个答案: