使用jQuery在密码字段密码屏蔽(Password masking in password fie

如何做到密码屏蔽，如Android手机，当我们键入一个键就显示几秒钟的关键等，并把它改为“*”。 我想提到的插件密码屏蔽如在使用JS手机是不是最佳的。 和的jsfiddle http://jsfiddle.net/medopal/X37Wz/不能处理退格键和删除。 能否请您提出任何其他的方法来做到这一点？ 只使用jQuery和不使用插件。

Answer 1:

在这里，我也做了上面的查询完整的解决方案仓。 请演示链接下面给出：

演示： http://codebins.com/bin/4ldqp8u

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>

JQuery的：

$(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)
        }, 500);
    });

});

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

}

演示： http://codebins.com/bin/4ldqp8u

Answer 2:

基于keyur在上面codebins.com代码，这个伟大的小答案在这里https://stackoverflow.com/a/4843500/1056285也https://stackoverflow.com/a/1431109/1056285 （为了使退格键实际删除没有错误）我适应的解决方案，考虑到退格呢！

$(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)
        }, 500);
    });

    $("#txtpwd").keydown(function(e) {
        if (e.keyCode == 8) {
            setTimeout(function() {
                maskPassword(e)
            }, 1);
        }
    });

});

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

function maskPassword(e) {

    var text = $('#txthidden').val();
    var stars = $('#txthidden').val().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().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.substr(0, curPos) + text.substr(curPos + 1);
        }
        //Set New String on both input fields
        $('#txthidden').val(text);
        $('#txtpwd').val(generateStars(stars));
    }

}

你可以看看下面： http://codebins.com/bin/4ldqp8u/38

Answer 3:

IE 10具有该功能。 可能会有一些人能撕了吗？ ：|

另外，我写了一个简单的片断在此基础上在这里 ，应该让你开始编码自己。

编辑：看看这里的代码：

<form action="#" onclick="return false;">
<input type="text" id="pv" name="passval" value="password" /><br>
<input type="password" id="p" name="pass" value="passwordsd" /><br>
<button id="b">Show</button>
</form>
<script>
$("#b").mousedown(function(){
  $("#pv").val($("#p").val());
}).mouseup(function(){
  $("#pv").val("");
});
</script>

文章来源: Password masking in password field using jquery