如图所示,点一个右边的字体图标,就把左边的input的类型从text换成password?
怎么做,我看有些网站就是类似这样的,点一下,就显示密码,再点一下,就不显示了,变成了小黑点。
代码:
<div class="form-group">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">密 码</span>
<input id="pass_word" name="pass_word" type="text" class="form-control" placeholder="请输入密码" aria-describedby="basic-addon1">
<span class="input-group-addon"><i class="glyphicon glyphicon-eye-open"></i></span>
</div>
</div>
</div>
可以看下Bootstrap 插件文档(http://v3.bootcss.com/javascr...,上面列出了一些bootstrap写好的方法,貌似没有你要的这个,就要自己补充一个了吧。
<!--html-->
<div class="form-group">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">密 码</span>
<input id="pass_word" name="pass_word" type="password" class="form-control js-password-control" placeholder="请输入密码" aria-describedby="basic-addon1" >
<span class="input-group-addon js-password-btn"><i class="glyphicon glyphicon-eye-open"></i></span>
</div>
</div>
</div>
<!--html-->
<!--script-->
<script>
$(document).ready(function(){
var flag = 1;
$(".js-password-control").click(function(event) {
if( flag === 1 ){
$(".form-control").attr("type","text");
flag = 0;
}else{
$(".js-password-btn").attr("type","password");
flag = 1;
}
});
});
</script>
<!--script-->
用js操作dom
点击事件时改变input标签的type属性
<div id="password-box">
<em id="alt-btn"><a href="javascript:showps()"></a></em>
<input type="password" name="newpassword" >
<label></label>
</div>
<script>
var nedpas=$("#password-box");
var alnate=$("#alt-btn");
function showps(){
if (this.forms.newpassword.type="password") {
$("#password-box").find("input").replaceWith("<input type=\"text\" name=\"newpassword\" value="+this.forms.newpassword.value+">");
alnate.html("<a href=\"javascript:hideps()\"></a>");
}
}
function hideps(){
if (this.forms.newpassword.type="text") {
$("#password-box").find("input").replaceWith("<input type=\"password\" name=\"newpassword\" value="+this.forms.newpassword.value+">");
alnate.html("<a href=\"javascript:showps()\"></a>");
}
}
</script>
<input type="text" id="psw">
<button id='btn'>按钮</button>
<script>
var obj = document.getElementById('btn');
var psw = document.getElementById('psw');
obj.onclick = function(){
if(psw.getAttribute('type') == 'text'){
psw.setAttribute('type','password')
}else{
psw.setAttribute('type','text')
}
}
</script>
改变input的属性就ok了 $('input[type="text"]').attr('type', 'password');
$('#button').on('click', function(){
$(input[type=password]).attr('type', 'text');
});
Bootstrap主要的功能是ui樣式,設計的初衷也是為了讓不懂css的後端能快速搭建界面。
改變input的type已經涉及到dom層面,應該使用js去處理
直接修改属性会存在兼容性问题,建议弄两个input进行切换显示