javascript (jQuery)和 html(bs框架) 实现 密码输入框可见/转换
思路
之前看到有实现使用了两个输入框,一个显示一个不显示,个人觉得不太方便。
在输入框边上加一个图标(可以用bs框架的小图标/小图片)
用js给这个图标的onclick事件加上函数 然后点击的时候
- 改变input的type(password 和 text互换)
- 改变那个图标 用的是图片就换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"
});
}
});
效果
显示
不显示