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 判断指定字符串是否为有效数字
May 11 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
常用的js方法合集
Mar 10 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
ReactRouter的实现方法
Jan 25 Javascript
5个实用的JavaScript新特性
Jun 16 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP 正则表达式小结
2015/02/12 PHP
PHP文件操作详解
2016/12/30 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python实现猜数字游戏
2020/03/25 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
python 实现字符串下标的输出功能
2020/02/13 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
大学生新学期计划书
2014/04/28 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
医院领导班子整改方案
2014/10/01 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers