CODEWITHSUNDEEP
javascriptjqueryhtml
user4965201
user4965201

Reputation: 973

JavaScript password masking while typing the password

I was looking for the JavaScript function to mask the input password along with showing the password in other textbox.

Here is the JavaScript code I found on the internet

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

and the html is given as 

<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>

now when I type in the txtpwd field it coverts into the asterisk sign and prints the text value in txthidden text box. but when I delete from the txtpwd text-box it does not delete the text from txthidden . and the demo can be found here http://codebins.com/bin/4ldqp8u

Please let me know how can I fix it . Thankx in Advance

Upvotes: 0

Views: 6919

Answers (2)

Mic
Mic

Reputation: 4004

For delete and backspace, switch to keyup instead. As here in a modified version of your demo: http://codebins.com/bin/4ldqp8u/111

It will catch keys that keypress doesn't. That's about as close as it's going to get. It's still really not going to be good solution as long as you're trying to convert the characters midstream (i.e. in the key* event), because anytime anyone highlights a chunk and changes them as a group, your hidden box will mismatch the entered input. Also, stuff like cutting with Ctrl + X will mess it up. Mouse click and drag could potentially mess it up. Pasting into the box will mess it up. etc.

Upvotes: -1

KoenVE
KoenVE

Reputation: 311

i was looking for the javascript function to mask the input password along with showing the password in other textbox

In HTML5, there's by default an input field for passwords, so that it is masked as you type in your input.

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

Upvotes: 4

Related Questions