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 错误处理的几种方法
Jun 13 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
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反弹shell实现代码
2009/04/22 PHP
php实用代码片段整理
2016/11/12 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python刷投票的脚本实现代码
2014/11/08 Python
Python中有趣在__call__函数
2015/06/21 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
使用python存储网页上的图片实例
2018/05/22 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python with语句和过程抽取思想
2019/12/23 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
创业者是否需要商业计划书?
2014/02/07 职场文书
酒店端午节促销方案
2014/02/18 职场文书
党员转正介绍人意见
2015/06/03 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
一文搞懂Redis中String数据类型
2022/04/03 Redis