如何在引导程序中的 input type=password 上使用工具提示显示输入的密码？

Question

如何在放置在输入元素上的工具提示上显示“用户输入的type=password密码”，只有选择“Show Password”复选框。?

我想要实现的是。

如果用户选中复选框“显示密码”，那么密码应该使用工具提示在明文中可见。

到目前为止，我已经这样做了。

HTML

<form> 
    <span class="form-label">Password</span>
    <input type="password" id="password" class="form-control" style="width:350px;" placeholder="Password" data-toggle="tooltip" data-placement="right" title="" required>
    <div class="checkbox">
    <label><input type="checkbox" id="show-password" onClick="javascript:showPassword(this)">Show Password</label>
    </div>
</form>

爪哇脚本

function showPassword(obj) {
    if (obj.checked) {
        /* checkmark is checked*/

        /*show tooltip*/
        $('#password').tooltip('show');

        /*create onkeyup event so the tooltip changes as the password changes.*/
        $("#password").keyup(function () {
            var entered_password = document.getElementById("password").value;
            $("#password").attr("title", entered_password);
            $("#password").tooltip('fixTitle');
        });
    } else {
        //hide the tooltip//
    }
}

CSS

@import url("http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css");
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css");

http://jsfiddle.net/834Nj/1/

到目前为止，它只有在我选择并重新选择复选框时才有效，但在我输入密码时无效。

Answer 1

你可以这样做：

$("#show-password").on('change' , function(){
  if($(this).is(':checked')){
    $('#password').tooltip({title : $('#password').val(), placement:'right',trigger:'manual'});
    $('#password').tooltip('show');
  }
  else{
    $('#password').tooltip('destroy');
  }
})

$('#password').on('keyup' , function(){

  if($('#show-password').is(':checked')){
    $(this).data('bs.tooltip').options.title = $(this).val();
    $(this).data('bs.tooltip').options.animation = false;
    $(this).tooltip('fixTitle').tooltip('show');

    if($(this).val()==""){
        $(this).tooltip('hide');
    }
  }   
});

http://jsfiddle.net/834Nj/7/