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 innerText和innerHtml应用
Jan 28 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
javascript实现拼图游戏
Jan 29 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
jquery键盘事件介绍
2011/01/31 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
浅谈JavaScript对象与继承
2016/07/10 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
Python实现优先级队列结构的方法详解
2016/06/02 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
TensorFlow变量管理详解
2018/03/10 Python
Python for循环生成列表的实例
2018/06/15 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
高中物理教学反思
2014/02/08 职场文书
《胡杨》教学反思
2014/02/16 职场文书
股份合作协议书范本
2014/04/14 职场文书
综合实践活动总结
2014/05/05 职场文书
亮剑观后感300字
2015/06/05 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
idea下配置tomcat避坑详解
2022/04/12 Servers