如何在密码字段中显示4位数字

Question

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.

Answer 1

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

Answer 2

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.com/wijifupuco/1/edit?html,css,js,output