密码显示隐藏切换
Posted hupan508
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了密码显示隐藏切换相关的知识,希望对你有一定的参考价值。
<div class="pwd-wrap"> <input type="password" id="pwd" value="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‘); } } } }
以上是关于密码显示隐藏切换的主要内容,如果未能解决你的问题,请参考以下文章
FragmentTransaction 隐藏/显示有时不起作用