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 事件绑定函数代码
Apr 28 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
PHP递归创建多级目录
2015/11/05 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
python 多线程应用介绍
2012/12/19 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
浅析python协程相关概念
2018/01/20 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
授权委托书(公民个人适用)
2014/09/19 职场文书
八项规定整改方案
2014/10/01 职场文书
营销计划书范文
2015/01/17 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Nginx配置https的实现
2021/11/27 Servers
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS