码迷,mamicode.com
首页 > Web开发 > 详细

html input密码显示为“*”

时间:2016-04-20 13:07:40      阅读:373      评论:0      收藏:0      [点我收藏+]

标签:

1. 功能需求:HTML中,在input password输入框中输入字符将默认显示为“实体圆点”,但这里要求将实体圆点字符替换成“*”号显示。

2. 局限:鼠标光标非IE浏览器不一定显示,选择多个字符时未有视觉上的区分,功能没有影响;不支持中文输入。

3. 实现:通过两个input框实现,设置字符字体为等宽字体;其中真正的密码输入框设置为透明且遮盖住另一输入框,将非密码输入框的字符依密码字符串的多少显示“*”字符的个数。

附上测试文件如下:

<!DOCTYPE html>
<html encoding="utf-8">
<head>
	<style>
	*{margin:0;padding:0}
	input{font:14px Monospace;height:20px;width:160px;}
	label{display:inline-block;width:100px;height:20px;}
	#pass{position:absolute;left:100px;top:0;opacity:0;filter:alpha(opacity=0);z-index:2;}
	form{position:relative;}
	#hint_pass{position:absolute;left:100px;}
	</style>
</head>
<body>
	<form>
		<label>Password:</label>
		<input type="text" id="hint_pass" maxlength="20" tabindex="-1" />
		<input type="text" id="pass" name="pass" maxlength="20" />
	</form>	
<script>
	var pass=document.getElementById(‘pass‘);
	var hint_pass=document.getElementById(‘hint_pass‘);
	pass.onkeyup=pass.onchange=function(){hint_pass.value=pass.value.replace(/./g,‘*‘);};
</script>	
</body>
</html>

html input密码显示为“*”

标签:

原文地址:http://www.cnblogs.com/susanws/p/5411951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!