Password masking in password field using jquery

Question

How to do password masking as in Android mobile like when we type in a key it shows a key for few seconds and change it to "*". I tried the plugin mentioned in Password masking as in mobiles using js it is not optimal. And the jsfiddle http://jsfiddle.net/medopal/X37Wz/ not able to handle backspace and delete. Could you please suggest any other methods to do this? Only using jquery and not to use plugins.

if it will be used on desktop - there is no reason in such behaviour. If it will be used on mobile platform - it will be masked automatically. — zerkms, Aug 06 '12 at 05:44
It is not done automatically we need to handle it using jQuery. — Raji, Aug 06 '12 at 05:53
it is done automatically by mobile browsers. Just use input `password` — zerkms, Aug 06 '12 at 06:10
I gave input field as . It simply showing as entered keys as dots. But i need to show the entered key for few seconds and change it to dot. — Raji, Aug 06 '12 at 06:25

score 3 · Accepted Answer · answered Aug 06 '12 at 07:58

here i have done complete solution bin for above query. please check demo link as given below:

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

}

Demo: http://codebins.com/bin/4ldqp8u

Thanks. But how it handle if we delete a character from txtpwd? As of now it is not getting deleted in hidden field. — Raji, Aug 06 '12 at 08:24
Hi, have you visited above demo link..? It is working fine as your query. — gaurang171, Aug 06 '12 at 09:17
If you type "123" in txtpwd input element and Now, As per your query I have set keypress event on txtpwd so if your cursor on txtpwd after first star like " * | * * " and you press Delete then it removes "2" from hidden element value "13". — gaurang171, Aug 06 '12 at 09:27
Same as for backspace Now it you press backspace "*|*" then it removes "1" from hidden element value. — gaurang171, Aug 06 '12 at 09:27
Here, i have set on checks that if cursor in txtpwd before first char like "|***" and press backspace same as if cursor after last char like "***|" and press Delete key then it doesn't do anything. — gaurang171, Aug 06 '12 at 09:27
Thanks. I changed the keypress event to keydown for my requirement. — Raji, Aug 06 '12 at 10:16

score 3 · Answer 2 · edited May 23 '17 at 12:30

based on keyur at codebins.com code above, this great little answer here https://stackoverflow.com/a/4843500/1056285 and also https://stackoverflow.com/a/1431109/1056285 (for making the backspace actually delete without bugs) i adapted the solution to take into account backspace too!

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

}

You can have a look below: http://codebins.com/bin/4ldqp8u/38

While this link may answer the question, it is better to include the essential parts of the answer [here](http://meta.stackoverflow.com/a/8259) and provide the link for reference. Link-only answers can become invalid if the linked page changes. — bummi, May 12 '14 at 12:09
@bummi i didn't include the code because i had some issues with code formatting and i was to lazy to see what's wrong. But i figured it and now i add the code too. Thanks for the suggestion :) — Andrew Starlike, May 12 '14 at 12:20
This *almost* worked, but doesn't work correctly when you select the whole field and press delete. I found this script, which worked better: http://www.sitepoint.com/better-passwords-1-the-masked-password-field/. — Matt Browne, Sep 16 '14 at 19:22

score 1 · Answer 3 · answered Aug 06 '12 at 06:35

IE 10 has that feature. May be some one can rip it off? :|

IE 10 on Windows 8

Also, I wrote a simple snippet basing on this here that should get you started on coding your own.

EDIT: check out the code here:

<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

3 Answers3

Linked

Related