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 05 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
js实现简单模态框实例
Nov 16 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 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
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python文件路径名的操作方法
2019/10/30 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python读取实时数据流示例
2019/12/02 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python多维数组分位数的求取方式
2020/03/03 Python
Python实现播放和录制声音的功能
2020/08/12 Python
python3处理word文档实例分析
2020/12/01 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
初三政治教学反思
2014/01/30 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL