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 相关文章推荐
js中的referrer返回上一页使用介绍
Sep 26 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
js+css3实现旋转效果
Jan 20 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
javascript实现滚动条效果
Mar 24 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
VueJS实现用户管理系统
2020/05/29 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python:socket传输大文件示例
2017/01/18 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
flask框架视图函数用法示例
2018/07/19 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python如何获取apk的packagename和activity
2020/01/10 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
中学教师自我鉴定
2014/02/07 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
高三复习计划
2015/01/19 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python