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

 更新时间:2016年05月27日 09:07:11   作者:韩一宁  
这篇文章主要介绍了实现密码框(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){
$('#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)中显示文字提示功能代码的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 微信小程序 swiper 组件遇到的问题及解决方法

    微信小程序 swiper 组件遇到的问题及解决方法

    这篇文章主要介绍了微信小程序 swiper 组件遇到的问题及解决方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • JS实现的跨浏览器解析XML文件实例

    JS实现的跨浏览器解析XML文件实例

    这篇文章主要介绍了JS实现的跨浏览器解析XML文件的方法,结合实例形式分析了javascript基于ActiveXObject操作xml文件的加载与解析相关技巧,需要的朋友可以参考下
    2016-06-06
  • JS实现向表格行添加新单元格的方法

    JS实现向表格行添加新单元格的方法

    这篇文章主要介绍了JS实现向表格行添加新单元格的方法,涉及javascript针对表格进行动态操作的技巧,需要的朋友可以参考下
    2015-03-03
  • js将字符串中的每一个单词的首字母变为大写其余均为小写

    js将字符串中的每一个单词的首字母变为大写其余均为小写

    本文主要介绍了javascript将字符串中的每一个单词的首字母变为大写其余均为小写的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • layui递归实现动态左侧菜单

    layui递归实现动态左侧菜单

    这篇文章主要为大家详细介绍了layui递归实现动态左侧菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 详解JavaScript前端加解密工具库的使用

    详解JavaScript前端加解密工具库的使用

    这篇文章主要为大家详细介绍了JavaScript前端加解密工具库(CryptoJS、JSEncrypt、bcryptjs)的具体使用,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2023-12-12
  • JavaScript 开发中规范性的一点感想

    JavaScript 开发中规范性的一点感想

    在开发中通用的几个方法,我们把它们放到utility目录下或者utility.js中;所有的提示信息和报错信息统一放置在一起。看起来都是小小的几步,却能让咱们开发的代码同事读起来更顺畅,下个项目中也能用上。
    2009-06-06
  • js开发插件实现tab选项卡效果

    js开发插件实现tab选项卡效果

    这篇文章主要为大家详细介绍了js开发插件实现tab选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JS document文档的简单操作完整示例

    JS document文档的简单操作完整示例

    这篇文章主要介绍了JS document文档的简单操作,结合完整实例形式详细分析了JavaScript document文档元素添加、删除、获取、创建等相关操作技巧与使用注意事项,需要的朋友可以参考下
    2020-01-01
  • IE下双击checkbox反应延迟问题的解决方法

    IE下双击checkbox反应延迟问题的解决方法

    这篇文章主要介绍了IE下双击checkbox反应延迟问题的解决方法,需要的朋友可以参考下
    2014-03-03

最新评论