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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
Javascript 篱式条件判断
Aug 22 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
javascript实现五星评分功能
Nov 10 Javascript
ES6的新特性概览
Mar 10 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
vue 实现微信浮标效果
Sep 01 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
实用函数2
2007/11/08 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
Document 对象的常用方法
2009/07/31 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
python 调用c语言函数的方法
2017/09/29 Python
使用python实现BLAST
2018/02/12 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
浅析python的Lambda表达式
2019/02/27 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python列表生成器迭代器实例解析
2019/12/19 Python
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
新大陆软件面试题
2016/11/24 面试题
中英双版中文教师求职信
2013/10/27 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
经销商培训邀请函
2014/01/21 职场文书
工程项目建议书范文
2014/03/12 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
党委班子对照检查材料
2014/08/19 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL
Python代码实现双链表
2022/05/25 Python