zoukankan      html  css  js  c++  java
  • html input密码显示为“*”

    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;160px;}
    	label{display:inline-block;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>
  • 相关阅读:
    【2021-08-25】连岳摘抄
    【2021-08-24】对意义的过度扭曲
    【2021-08-23】枕边语
    【2021-08-22】连岳摘抄
    【2021-08-21】旅历尚浅
    【2021-08-20】做事情,等对应好角色去思考
    索引缓冲对象(EBO或IBO )的理解
    vao, vbo的一点拙见
    兔队线段树
    「具体数学」二:和式
  • 原文地址:https://www.cnblogs.com/susanws/p/5411951.html
Copyright © 2011-2022 走看看