首页 > 代码库 > 密码显示隐藏切换
密码显示隐藏切换
<div class="pwd-wrap"> <input type="password" id="pwd" value=http://www.mamicode.com/"123456"> <span id="btns"> <a>显示</a> <a class="cur">隐藏</a> </span> </div>
$(function() { var $pwd = $(‘.pwd-wrap‘); $pwd.on(‘click‘, ‘.btns a‘, function() { var $this = $(this); $this.addClass(‘cur‘).siblings(‘a‘).removeClass(‘cur‘); if ($this.index()) { $pwd.find(‘#pwd‘).attr(‘type‘, ‘password‘); } else { $pwd.find(‘#pwd‘).attr(‘type‘, ‘text‘); } }); })
还是要说说原理的,最主要的思路就是<strong
>改变密码框的类型strong>,点击按钮切换,切换的是input
的type
属性,在password
和text
两者之间切换。
这个效果是不是很简单呢,当我看到的时候想都没想就写出来了 ^_^
顺道写个JS原生版本的吧。
window.onload = function() { var input = document.getElementById(‘pwd‘), btn = document.getElementById(‘btns‘), btns = btn.getElementsByTagName(‘a‘); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { for (var j = 0; j < btns.length; j++) { btns[j].className = ‘‘; } this.className = ‘cur‘; if (this.innerHTML == ‘隐藏‘) { input.setAttribute(‘type‘, ‘password‘); } else { input.setAttribute(‘type‘, ‘text‘); } } } }
密码显示隐藏切换
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。