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 相关文章推荐
JavaScript 变量基础知识
Nov 07 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
关于时间计算的结总
2006/12/06 PHP
php短信接口代码
2016/05/13 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
用js编写留言板
2020/03/17 Javascript
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
django云端留言板实例详解
2019/07/22 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
xxx同志考察材料
2014/02/07 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
职位说明书范文
2014/05/07 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
三方股东合作协议书
2014/10/28 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年班组工作总结
2015/04/20 职场文书
最美乡村教师观后感
2015/06/11 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
Django实现翻页的示例代码
2021/05/24 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Pytorch可视化的几种实现方法
2021/06/10 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Python获取字典中某个key的value
2022/04/13 Python