html input密码显示为

最新推荐文章于 2024-05-13 17:57:15 发布

一日一夜呃呃

最新推荐文章于 2024-05-13 17:57:15 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_44947841/article/details/89473716

版权

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.pass.function(){hint_pass.value=pass.value.replace(/./g,'*');};</script> </body></html>