输入框密码切换显示或隐藏功能的实现
2015-03-21 18:51
519 查看
在一些网站或web app登陆的时候输入密码时有一个显示或者隐藏密码字符的开关,个人想到实现方法应当是js动态修改input标签的type属性,当type为text的时候会显示密码内容,而type为password的时候则会显示为圆点或者星号等,以下是demo:
html:
js:
html:
<input type="password" id="pwd"> <button id="clc">click</button>
js:
var pwd = document.querySelector('#pwd'); document.querySelector('#clc').addEventListener('click',function(){showPwd(pwd)},false); function showPwd(obj){ var type = obj.getAttribute('type'); if(type=='password'){ obj.setAttribute('type','text'); }else{ obj.setAttribute('type','password'); } }
相关文章推荐
- jQuery通过改变input的type属性实现密码显示隐藏切换功能
- vue实现密码显示隐藏切换功能
- ionic的切换效果实现——以登录页密码显示隐藏切换为例
- Android文本输入框(EditText)切换密码的显示与隐藏
- Android文本输入框(EditText)切换密码的显示与隐藏
- Android文本输入框(EditText)切换密码的显示与隐藏
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- IOS swift实现密码的显示与隐藏切换
- JS实现登录页密码的显示和隐藏功能
- Android文本输入框(EditText)切换密码的显示与隐藏
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- Android打造带删除的EditText并且实现输入框密码显示、隐藏
- jQuery实现切换隐藏与显示同时切换图标功能
- Android文本输入框(EditText)切换密码的显示与隐藏
- JS实现密码框的显示密码和隐藏密码功能示例
- 利用UGUI InputField 实现 显示/隐藏密码 功能
- 利用UGUI实现 显示/隐藏密码 功能
- jq改变input的type属性实现密码显示隐藏的切换
- Android输入框切换密码显示与隐藏
- Android实现标题显示隐藏功能