Question

如果选中“显示密码”复选框，如何在输入元素type=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>

JAVASCRIPT

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/

如何在bootstrap中使用输入类型=密码的工具提示显示输入的密码？

1 个答案: