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

仅当选中“显示密码”复选框时，如何在输入元素

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>

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");

---

到目前为止，只有在我选择并重新选择复选框时，它才起作用，而不是在我键入密码时。

您可以这样做：

$("#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');
    }
  }   
});

---

在您的案例中，您不需要收听

键控

事件。听

change

event instead不可能。它会带来安全风险，但不会带来安全风险。在新版本的IE中，有一个小按钮，允许您显示键入的密码。在大多数WiFi登录屏幕上，都有一个复选框以明文形式显示密码。默认情况下不应启用它，但如果用户想要显示自己的密码，这是他们的选择。我会这样做：，只需更改输入类型。@AMB，我为我的项目做了类似的事情。它在IE11中看起来很糟糕，因为它有自己的“眼睛”图标，无论您的复选框值是什么，它都会显示密码。因此，也许你应该考虑一下。根据这个问题，这是最好的答案，但是如果有人试图在同一字段中显示加密的密码，那么Ilya Luzyanin就这样做了。

$("#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');
    }
  }   
});