jQuery通过改变input的type属性实现密码显示隐藏切换功能

 更新时间:2017年02月08日 16:43:49   作者:艾莱克JS  
大家在做登录注册功能的时候都会遇到用户选择自己输入的密码是否显示需求,大家都是怎么实现的呢?今天小编给大家分享一种比较好用的方法jQuery通过改变input的type属性实现密码显示隐藏切换功能,需要的朋友参考下

一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求,

这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏):

于是我用了$(''#id).attr('type', 'password')这个API 然而结果并不是我想的那样,出错了

HTML 代码

Uncaught Error: type property can't be changed

意思大概就是这个属性不能被修改.

于是我就googl一手.

然而我得到的结果是这样的

HTML 代码

<input id="showPwd" class="txt" type="text" value="密码" tabindex="2" /> 
<input id="pwd" class="txt" name="password" type="password" /> 
var showPwd = $("#showPwd"), pwd = $("#pwd"); 
showPwd.focus(function(){ 
  pwd.show().focus(); 
  showPwd.hide(); 
}); 
pwd.blur(function(){ 
  if(pwd.val()=="") { 
    showPwd.show(); 
    pwd.hide(); 
  } 
}); 

大体上都是这种办法,简单来说就是用两个input来回切换着显示,互相获取对方输入的字符!

这种办法我试了一手,可以实现,而且代码也不是很多。但是我总觉得怪怪的,这种需求应该这么实现?肯定不可能啊

一般这种情况我都会去看看大厂是不是这么做的,而且某些大厂并不是这么做的!

但是Google都搜不到我的问题,应该是没有解决办法了吧!

以上所述是小编给大家介绍的jQuery通过改变input的type属性实现密码显示隐藏切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • jquery ui bootstrap 实现自定义风格

    jquery ui bootstrap 实现自定义风格

    本文主要是给大家分享了jQuery UI bootstrap的自定义风格,以及自定义的方法,非常的实用,有需要的小伙伴千万不要错过
    2014-11-11
  • jquery的ajax和getJson跨域获取json数据的实现方法

    jquery的ajax和getJson跨域获取json数据的实现方法

    本篇文章主要是对jquery的ajax和getJson跨域获取json数据的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 仿iframe效果Aajx文件上传实例

    仿iframe效果Aajx文件上传实例

    下面小编就为大家带来一篇仿iframe效果Aajx文件上传实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 基于jQuery实现的当离开页面时出现提示的实现代码

    基于jQuery实现的当离开页面时出现提示的实现代码

    基于jQuery实现的当离开页面时出现提示的实现代码,需要的朋友可以参考下。
    2011-06-06
  • jquery简单瀑布流实现原理及ie8下测试代码

    jquery简单瀑布流实现原理及ie8下测试代码

    可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度;测试环境:ie8 ff13.0.1 chrome22有兴趣的朋友可以了解下
    2013-01-01
  • 仿JQuery输写高效JSLite代码的一些技巧

    仿JQuery输写高效JSLite代码的一些技巧

    这篇文章主要介绍了仿JQuery输写高效JSLite代码的一些技巧,本文计划根据他人对jQuery总结的一些速度方面的技巧和一些建议,来教你提升你的JSLite和javascript代码,需要的朋友可以参考下
    2015-01-01
  • JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

    JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

    分别定义三个class为increaseFont、decreaseFont、resetFont 的元素。为其click事件添加事件
    2012-03-03
  • Jquery Ajax Error 调试错误的技巧

    Jquery Ajax Error 调试错误的技巧

    jquery在程序开发ajax应用程序时提高了效率,减少了需要兼容性的问题,当我们在ajax项目中,遇到ajax异步获取数据出错该怎么解决呢,我们可以通过捕捉error事件来获取出错的信息,本文给大家介绍jquery ajax error调试错误的技巧,感兴趣的朋友一起学习吧
    2015-11-11
  • js/jquery判断浏览器的方法小结

    js/jquery判断浏览器的方法小结

    在网站前端开发中,浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把各种判断方法都总结一下,希望对大家有所帮助
    2014-09-09
  • 远离JS灾难css灾难之 js私有函数和css选择器作为容器

    远离JS灾难css灾难之 js私有函数和css选择器作为容器

    当一个项目庞大到一定阶段,例如UI展示层采用了模块化模板化之后,就会出现js灾难,css灾难,经常出现以前从来不放在一起的两个js或css莫名奇妙的被放到了一个页面,基本的原因是模块重用造成的
    2011-12-12

最新评论