1、需求背景 在设置密码信息时,需要支持输入内容的隐藏和可见的切换,效果如下: 隐藏: 显示: 2、实现原理: 1. 设置两个input,一个type为password,一个type为text,分别用于显示隐藏密码和可见密码 2. 设置两个字体图标,一个为睁开的眼睛,一个为闭上的眼睛,用于点击切换两个input的显示,当然,图标的样式可以任意定...
}.boxinput{width:370px;height:30px;border:0;outline: none; }.boximg{position: absolute;top:2px;right:2px;width:24px; }</style></head><body><divclass="box"><labelfor=""><imgsrc="images/close.png"alt=""id="eye"></label><inputtype="password"id="pwd"></div><script>// 1. ...
1 新建一个html文件，命名为test.html ，用于实现点击显示和隐藏密码功能 。2 在test.html页面，创建一个form表单，给form表单一个name属性，用于下面获得form表单对象。3 在form表单中，创建一个input密码输入框，并且定义它的name属性为password。同时创建一个a链接“显示密码”。两个元素都使用span标签包围，并且给...
}</style><scripttype="text/javascript"src="js/jquery-1.12.4.min.js"></script></head><body><ddclass="password"><inputtype="password"name=""placeholder="设置密码:8-16位字母和数字"maxlength="16"><iclass="fa fa-eye-slash"></i></dd><scripttype="text/javascript">$(".password").on...
<span id=click><a href="javascript:showps()">显⽰密码</a></span> </form> </body> <script language="JavaScript"> function showps(){ if (this.forms.password.type="password") { document.getElementById("box").innerHTML="<input type=\"text\" name=\"password\" size=\"80\" style...
3、再次点击后,又变成闭眼+密码框 要想实现3,方法1: 则需要一个变量,来辅助判断当前input的属性,如果flag为0,则在点击后,将input的type属性改为text框,同时,再将flag值重新赋为1.此时,再次点击,又会进行判断,而这次的flag=1,所以,就直接将input的type属性改为了password ...
直接给 input type="password"的输入框赋值不行,由于安全因素,不允许对密码框赋默认值,只能通过键盘的方式输入值。而又要在密码框显示*密码,换个思路使用简单的js脚本即可实现这个效果。 <input type="password" id="txtPass" style="display:none;" runat="Server"/><input type="text" runat="server" id=...
();">显示密码</a></span> </form> </div> </body> <script> // 判断 input的type是password还是text.切换即可 var ele = { sp : document.getElementById('sp'), btn : document.getElementById('btn'), showP : '<a href="javascript:showPsw();">显示密码</a>', hideP : '<a href=...
<title>js实现input密码框</title> </head> <body> <div id="app"> <div id="my_input_div" onmouseover="addClearNode()" onmouseout="hiddenClearNode()"> <input id="my_input" type='password' placeholder='请输入内容' oninput="addClearNode()" ...