关于密码的显示和隐藏
Posted tanxiang6690
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于密码的显示和隐藏相关的知识，希望对你有一定的参考价值。
我们经常在开发中经常遇到密码是以密码的格式显示还是以文本的格式显示，在这给大家提供一个小思路，以后遇到了可以参考参考
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .pass{ width:200px; height: 20px; } </style> <script type="text/javascript" src="jquery1.12.3.js"></script> <script> /** * 普通js方法鼠标事件模拟密码显示隐藏 */ /* window.onload=function(){ var btn=document.getElementById("btn"); var pass=document.getElementById("pass") btn.onmousedown=function(){ pass.type="number" }; btn.onmouseup=btn.onmouseout=function(){ pass.type="password" } } */ /** * Jquery click事件实现密码显示隐藏 */ $(document).ready(function(){ $("#btn").click(function(){ //$("#w3s").attr("href") if($("#pass").attr("type")=="password"){ $("#pass").attr({type:"text"}); }else{ $("#pass").attr({type:"password"}); } }); }); /** * JQuery鼠标事件模拟密码显示隐藏 */ /* $(function(){ $("#btn").mousedown(function(){ $("#pass").attr({type:"text"}); }); $("#btn").mouseup(function(){ $("#pass").attr({type:"password"}); }); });*/ </script> </head> <body> <input type="password" name="" id="pass" value="123456" class="pass"/> <input type="button" name="" id="btn" value="点击显示" /> </body> </html>
以上是关于关于密码的显示和隐藏的主要内容，如果未能解决你的问题，请参考以下文章