实现的效果
![\"实现的效果\"](\"/images/csdn/15452043831T545O2t043X83.png\")
代码
<!DOCTYPE html>
<html encoding=\"utf-8\">
<head>
<style>
</style>
</head>
<body>
<form>
<label>Password:</label>
<!--这里为了展示，真实场景此input隐藏-->
<input type=\"text\" id=\"hint_pass\" disabled/>
<input type=\"text\" id=\"pass\" name=\"pass\"/>
</form>
< >
/*
获取真实值可以通过 hint_pass.value
*/
var pass=document.getElementById(\'pass\');
var hint_pass=document.getElementById(\'hint_pass\');
pass. =pass. =function(){
if(pass.value.length>2&&pass.value.length<=10){
if(hint_pass.value.length<pass.value.length){
let addstr = pass.value.substr(hint_pass.value.length);
hint_pass.value +=addstr;
pass.value = pass.value.substr(0,2);
for(let i=2;i<hint_pass.value.length;i++){
pass.value+=\"*\"
}
}else if(hint_pass.value.length>pass.value.length){
hint_pass.value = hint_pass.value.substr(0,pass.value.length)
}
}else if(pass.value.length>10){
if(hint_pass.value.length<pass.value.length){
let addstr = pass.value.substr(hint_pass.value.length);
hint_pass.value +=addstr;
pass.value = pass.value.substr(0,2);
for(let i=2;i<hint_pass.value.length;i++){
if(i<10){
pass.value+=\"*\"
}else{
pass.value+=hint_pass.value.charAt(i);
}
}
}else if(hint_pass.value.length>pass.value.length){
hint_pass.value = hint_pass.value.substr(0,pass.value.length)
}
}else{
hint_pass.value = pass.value
}
};
</ >
</body>
</html>
原理
通过对input#pass的值改变的监听，对比两个input值的长度来使两个input值同步。
继续阅读与本文标签相同的文章
上一篇 :
mysql case when语句
-
在线PDF加密，你的隐私你做主！
2026-05-18栏目： 教程
-
浅谈物联网用户体验目标的变化
2026-05-18栏目： 教程
-
Linux基础命令---host域名查询工具
2026-05-18栏目： 教程
-
Apache Flink Meetup 北京站，可能有你最想听的技术干货！
2026-05-18栏目： 教程
-
你真的了解RPA吗？
2026-05-18栏目： 教程