javascript (jQuery)和 html(bs框架) 实现 密码输入框可见/转换

思路

之前看到有实现使用了两个输入框，一个显示一个不显示，个人觉得不太方便。

在输入框边上加一个图标（可以用bs框架的小图标/小图片）

用js给这个图标的onclick事件加上函数 然后点击的时候

1. 改变input的type（password 和 text互换）
2. 改变那个图标 用的是图片就换src 用的是bootstrap框架的图标就换class

代码

• html
  这里的<span>用的是bootstrp的框架

<p class="tag">密码</p>
   <div class="input-group">
       <input type="password" placeholder="your password here" required id="password" name="password" class="form-control">//显然 这是输入框
       <span class="input-group-addon glyphicon glyphicon-eye-close" id="demo"></span>//这个span是那个睁眼/闭眼图标 点一下可以密码可见/不可见变化
   </div>

• js代码
  这里用jQuery实现

$('#demo').click(function () {
    var img = $('#demo'); //找到输入框右边的图标
    var input = $('#password');//找到输入框
    if(img.attr("class") === "input-group-addon glyphicon glyphicon-eye-close"){//如果图标是闭眼（输入不显示）
        img.attr( {
            "class" : "input-group-addon glyphicon glyphicon-eye-open" 
        });
        input.attr({
            "type" : "text" 
        });
    }
    else {//如果图标是睁眼（输入显示）
        img.attr({
            "class" : "input-group-addon glyphicon glyphicon-eye-close"
        });
        input.attr({
            "type" : "password" 
    });
    }
});

效果
显示

不显示