基于JS实现密码框(password)中显示文字提示功能代码
2016-05-27 09:07
1016 查看
其实实际上实现中并不能让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){ $('#login_showPwd').hide(); $('#login_password').show().focus(); } }); $('#login_password').blur(function(){ var text_value = $(this).val(); if(text_value==""){ $('#login_showPwd').show(); $('#login_password').hide(); } }); //重置部分 $('#btn_res').click(function(){ $('.admin').val("请输入您的账号"); $('#login_password').hide().val(""); $("#login_showPwd").show(); }); });
下面给大家介绍密码输入框 底下显示的文字方法
一个小的提示很多网站密码输入框里面都有密码两个字,以前以为是text的,值到今天才知道,它就是password标签,写法如下
<input type="password" name="pas" placeholder="密码"/>
加了一个placeholder属性就好了
以上所述是小编给大家介绍的实现密码框(password)中显示文字提示功能代码的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 让电脑右下角显示你想要文字
- 可以恢复flashfxp密码的FlashFXP Password Recovery v1.0.160.2006 汉化版
- You must SET PASSWORD before executing this statement的解决方法
- 让超出DIV宽度范围的文字自动显示省略号...
- 使用CSS不用程序实现文字自动截断 用省略号代替
- 使用GD库生成带阴影文字的图片
- C#获取关键字附近文字算法实例
- asp.net下GDI+的一些常用应用(水印,文字,圆角处理)技巧
- 图片与文字半透明效果 鼠标移上不透明
- 基于JavaScript实现文字超出部分隐藏
- javascript 网页上跳动的文字
- JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
- JS实现来回出现文字的状态栏特效代码
- JS实现文字掉落效果的方法
- js实现input框文字动态变换显示效果
- jQuery实现鼠标单击网页文字后在文本框显示的方法
- JS实现的文字与图片定时切换效果代码
- JS实现的新浪微博大厅文字内容滚动效果代码
- MYSQL安装时解决要输入current root password的解决方法
- 文字溢出实现溢出的部分再放入一个新生成的div中具体代码