I'm using normal JS and JSP which contains normal HTML tags. I have an input field with the type as PASSWORD which contains the maxlength of 10 digits.

Now I want to display the last 4 digits of the field values and other digits should be masked.

I'm not using jQuery and I want to use in normal JS.

So can anyone please suggest me any approach on it to achieve.

I'm using normal JS and JSP which contains normal HTML tags. I have an input field with the type as PASSWORD which contains the maxlength of 10 digits.

Now I want to display the last 4 digits of the field values and other digits should be masked.

I'm not using jQuery and I want to use in normal JS.

So can anyone please suggest me any approach on it to achieve.

• javascript
• html
• jsp

• 4 Nice question, however what have you tried yourself? – Mouser Commented Aug 3, 2015 at 13:29
• Must be responsive while user write password? – Matteo Rubini Commented Aug 3, 2015 at 13:59

2 Answers 2

Try following these steps.

1. Get the password value.
2. Get the 2 parts (last 4 characters and the remaining leading characters).
3. Replace the leading characters with • (ASCII-7 character).
4. Generate new password to show (masked + 4 visible characters).
5. Set the password value.

Check out this fiddle.

Here is the snippet.

var passField = document.getElementById('pass');
passField.type = "text";
var passValue = passField.value;
var passLength = passValue.length;
var masked = passValue.substring(0, passLength - 4);
masked = masked.replace(/./g, '•'); //The character is ASCII-7 (Press Alt+7 to type)
var text = passValue.substring(passLength - 4);
var newPass = masked + text;
passField.value = newPass;

<input type='password' id='pass' value="ThisIsPassword" />

CSS

#wrapper {
    position: relative;
}

#wrapper > input {
    font-family: monospace;
    text-align: right;
}

#wrapper > [type=password]::-ms-reveal{
    display: none;
}

#passwordMasked {
    width: 10em;
    border: solid 1px black;
    border-right: none;
}

#wrapper > #passwordUnmasked {
    border: solid 1px black;
    border-left: none;
    width: 3em;
    text-align: left;
}

#password { 
    position: absolute;
    left: 0;
    opacity: 0;
    width: 13em;
}

HTML

<div id="wrapper">
    <input type="password" onkeyup="updateunmasked()" id="passwordMasked" /><input type="text" id="passwordUnmasked" readonly /><input type="password" onkeyup="updateunmasked()" id="password" />
</div>

Javascript

function updateunmasked() {
    var p = document.getElementById("password").value;
    document.getElementById("passwordUnmasked").value = ('    ' + p.substring(Math.max(p.length - 4, 0))).substring(Math.min(p.length, 4));
    document.getElementById("passwordMasked").value = p.substring(4);
}

JSBin - https://jsbin./wijifupuco/1/edit?html,css,js,output