密码显示隐藏切换

废话不多说，直接上效果。

HTML代码：

<div class="pwd-wrap">
    <input type="password" id="pwd" value="123456" />
    <span id="btns">
        <a>显示</a>
        <a class="cur">隐藏</a>
    </span>
</div>

JQuery代码：

$(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');
        }
    });
})

还是要说说原理的，最主要的思路就是改变密码框的类型，点击按钮切换，切换的是 input 的type属性，在 password 和 text 两者之间切换。

这个效果是不是很简单呢，当我看到的时候想都没想就写出来了 ^_^

顺道写个JS原生版本的吧。

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');
            }
        }
    }
}

原生JS很久没写过了，感觉有点累赘哦，还有兼容问题，这里就不写了。