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 相关文章推荐
图片完美缩放
Sep 07 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
使用p5.js临摹动态图片
Nov 04 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之第二天
2006/10/09 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php 无法载入mysql扩展
2010/03/12 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php输入流php://input使用浅析
2014/09/02 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
php 修改密码实现代码
2017/05/24 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
大学军训感言200字
2014/02/26 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
python 中的jieba分词库
2021/11/23 Python