bootstrap, 怎么切换input的类型，从text换成password？

Question

如图所示，点一个右边的字体图标，就把左边的input的类型从text换成password？
怎么做，我看有些网站就是类似这样的，点一下，就显示密码，再点一下，就不显示了，变成了小黑点。

---

代码：

<div class="form-group">
    <div class="col-md-12">
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">密&nbsp;&nbsp;&nbsp;&nbsp;码</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>

Answer 1

    <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>

Answer 2

改变input的属性就ok了 $('input[type="text"]').attr('type', 'password');

Answer 3

 <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>

Answer 4

可以看下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-->

Answer 5

Bootstrap主要的功能是ui樣式，設計的初衷也是為了讓不懂css的後端能快速搭建界面。
改變input的type已經涉及到dom層面，應該使用js去處理

Answer 6

$('#button').on('click', function(){
$(input[type=password]).attr('type', 'text');
});

Answer 7

点击事件时改变input标签的type属性

Answer 8

直接修改属性会存在兼容性问题，建议弄两个input进行切换显示

Answer 9

用js操作dom