基于JS实现密码框(password)中显示文字提示功能代码.pdf

这篇文章主要介绍了实现密码框 (password) 中显示文字提示功能代码 ,在项目开发中经 常会用到，需要的朋友可以参考下 其实实际上实现中并不能让 password 中显示文字提示，但是我们在工作中有这样的需 求，当没输入东西的时候，框内有提示输入密码，但是当输入东西的时候又显示的是 * 号， 那么是如何实现的呢？其实原理很简单， 就是放两个文本框， 样式以及定位都是一样的。 先 将 type 为 password 的隐藏，只显示 type 为 text 的伪密码框， value 设置提示内容例如请输 入密码。然后当 input 触发的时候， type 为 text 的 input 隐藏，让 type 为 password 的 input 显示出来。然后当检测 password 的 value 为空的时候，再将 type 为 password 隐藏， type 为 text 的显示。啥话也不说了，上代码。 (ps:额外添加了重置功能 ) 先上 html 部分 <table class="login_table"> <tr> <td> 账号 </td> <td><input type="text" value=" 请输入您的账号 " class="admin" /></td> </tr> <tr> <td> 密码 </td> <td> <input type="text" value=" 请输入您的密码 "id="login_showPwd" /> <input type="password"id="login_password" style="display: none"/> </td> </tr> <tr> <td> <input type="button" value=" 登录 " /> <input type="button" value=" 重置 " id ="btn_res"/> </td> </tr> </table> 然后上 js 部分 // 账号部分 $(function(){ $(".admin").focus(function(){ if($(this).val() == " 请输入您的账号 "){ $(this).val(""); } }); $(".admin").blur(function(){ if($(this).val() == ""){ $(this).val(" 请输入您的账号 "); } }); // 密码部分 $('#login_showPwd').focus(function(){ var text_value=$(this).val(); if(text_value == this.defaultValue){