javascript实现密码框局部显示

最新推荐文章于 2022-07-21 18:46:32 发布

lzcwds

最新推荐文章于 2022-07-21 18:46:32 发布

阅读量468

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/lzcwds/article/details/85098040

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现的效果

代码

<!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>
<script>
	/*
        获取真实值可以通过    hint_pass.value
     */
	var pass=document.getElementById('pass');
	var hint_pass=document.getElementById('hint_pass');
	pass.onkeyup=pass.onchange=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
        }
	};
</script>
</body>
</html>

原理

通过对input#pass的值改变的监听，对比两个input值的长度来使两个input值同步。

lzcwds

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript实现密码框局部显示

实现的效果代码&lt;!DOCTYPE html&gt;&lt;html encoding="utf-8"&gt;&lt;head&gt; &lt;style&gt; &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;form&gt; &lt;label&gt;Passw
复制链接

扫一扫