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数组使用调用方法汇总
Dec 08 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
详解vue 组件的实现原理
Nov 12 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 文件上传功能实现代码
2009/06/24 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
php自定义分页类完整实例
2015/12/25 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
JavaScript实现禁止后退的方法
2006/12/27 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python SQLite3简介
2018/02/22 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
python文件和文件夹复制函数
2020/02/07 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
事业单位接收函
2014/01/10 职场文书
美德好少年事迹材料
2014/01/19 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
软件测试专业推荐信
2014/09/18 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
小王子读书笔记
2015/06/29 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
idea下配置tomcat避坑详解
2022/04/12 Servers
Ruby处理CSV数据方法详解
2022/04/18 Ruby