Question

我正在使用包含普通HTML标记的普通JS和JSP。我有一个类型为PASSWORD的输入字段，其中包含10位数的最大长度。

现在我想显示字段值的最后4位数字，其他数字应该被屏蔽。

我没有使用jQuery，我想在普通的JS中使用。

所以任何人都可以建议我采取任何方法来实现。

Answer 1

请尝试按照以下步骤操作。

获取密码值。
获取2个部分（最后4个字符和剩余的前导字符）。
将前导字符替换为•（ASCII-7字符）。
生成要显示的新密码（屏蔽+4个可见字符）。
设置密码值。

查看此fiddle。

以下是摘录。

＆＃13;

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;

＆＃13;

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

＆＃13;

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

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

2 个答案: