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


Posted in Javascript onFebruary 08, 2017

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

这种需求我们肯定会想到只要动态改变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属性实现密码显示隐藏切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
详解Angular路由之路由守卫
May 10 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
原生js实现弹窗消息动画
Nov 20 Javascript
微信小程序实现轮播图指示器
Jun 25 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 #Javascript
Bootstrap模态窗口源码解析
Feb 08 #Javascript
Bootstrap路径导航与分页学习使用
Feb 08 #Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 #Javascript
Bootstrap导航条学习使用(二)
Feb 08 #Javascript
jquery对象与DOM对象转化
Feb 08 #Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 #Javascript
You might like
php中随机显示图片的函数代码
2011/06/23 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
基于jquery的表格排序
2010/09/11 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python 中的lambda函数介绍
2018/10/10 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
儿科护士自我鉴定
2013/10/14 职场文书
中药专业大学生医药工作求职信
2013/10/25 职场文书
出纳的岗位职责
2013/11/09 职场文书
班级心理活动总结
2014/07/04 职场文书
行政介绍信范文
2015/05/04 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
vue实现在data里引入相对路径
2022/06/05 Vue.js