Partial Password Masking on Input Field

Partial Password Masking on Input Field

This might be a little sloppy, but it works as you want it to, is all in one text field, returns the full accurate SSN (despite replacing first 5 values with bullet points), and allows for editing anywhere in the field.

<input type="password" id="ssn" maxlength=9 />
<script>    var ssn = document.getElementById('ssn');    ssn.addEventListener('input', ssnMask, false);    var ssnFirstFive = "";    var secondHalf = "";    var fullSSN = "";
    function ssnMask(){        if (ssn.value.length <= 5){            ssn.type = 'password';        }        else{            detectChanges();            secondHalf = ssn.value.substring(5);            ssn.type = 'text';            ssn.value = "•••••";            ssn.value += secondHalf;            fullSSN = ssnFirstFive + secondHalf;        }    }
    function detectChanges() {        for (var i = 0; i < 5; i++){            if (ssn.value[i] != "•"){                ssnFirstFive = ssnFirstFive.substring(0, i) + ssn.value[i] + ssnFirstFive.substring(i+1);            }        }    }</script>

Masking input characters without type=password

Firstly, autocomplete = "off" should be on the <form> element, not the individual fields. This is because browsers typically store the values for all fields in a given form together (eg to allow for saving multiple username/password combinations for the same site).

Set it in the form, and it should work just fine for you. (although passwords already saved will typically still be auto-completed, so clear your password store before testing)

However, I would suggest that you're probably chasing the wrong target if this is considered a security concern.

The reason browsers offer this feature is because users want to be able to store their login credentials. Preventing them from doing so won't stop them wanting to, and if users really want to, there are still a number of ways they can get around it -- there are browser plug-ins explicitly designed to kill thew autocomplete = "off" feature and allow all passwords to be saved.

How your user stores the password at their end is ultimately not your security concern, and not something you really have any control over anyway.

In fact, if we prevent people from storing their passwords, it is more likely that they will use the same password in multiple places (simply because people don't have the capacity to remember different passwords for every site they use), so by preventing them from saving it, you might actually be making your users' passwords less secure.

If your site has a genuine need for security that cannot allow a password to be saved, then you will need to consider an alternative mechanism entirely. For example, bank logins these days often require users to enter specific numbered characters from their password -- eg "Please enter the fifth, eighth and twelfth characters from your password".

However, these schemes are more aimed at securing the transmission of the password rather than the storing of it: by only entering certain given characters, we don't have to input or transmit the entire password at all, so there is no chance of it being hacked en-route. It is still assumed that the user will probably have the password noted down somewhere (especially if they have to work out which is the twelfth character in the string)

This kind of scheme can be a real pain for users, but does offer a genuine level of login security without having to actually input or transmit the password. The additional level of difficulty it adds to the login process, however, means that only really high-security sites like banks are likely to use this kind of scheme over a regular password.

Masking password input in ReactJS

Well, the way to achieve this is either in your JSX/HTML or by CSS for the most part.

To achieve this with JSX or HTML, you can use:

<input type="password" name="password">

To achieve this with CSS, you can use:

-webkit-text-security: disc;
text-security: disc;

Masking Password

Hi you can achieve this by doing :

//html
    <span ng-show="showpassword" type="password">{{password | passwordFilter}}</span>
    <input ng-hide="showpassword" type="password" ng-model="password">
    <input type="checkbox" ng-model="showpassword" ng-checked="false">

//js file
    app.filter('passwordFilter', function() {
      return function(input) {
        var split = input.split('');
        var result = "";
        for(var i = 0 ; i < split.length ; i++){
          result += "*";
        }
        return result;
      };
    });

Password masking in password field using jquery

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

---

Related Topics