Question

如果密码少于6个字符，我正在使用bootstrap popover来显示。它工作正常，但当我点击文本时，它显示popover甚至文本框的值是有效的。如何在文本框的长度有效时隐藏popover

<head>
   <title>popover example</title>

    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>   



</head>

<body>

<div class="container">

<h1>Bootstrap popover Example</h1>

<div>

<input type="password" id="password1" placeholder="password" data-toggle="popover" >

</div>

</div>

这是我的js代码，当length有效时，我用popover删除div。但问题是当我点击文本时文本框显示弹出窗口。我想只在长度小于6时显示弹出窗口。

<script>


   $(function ()
      {
      debugger;
        $('#password1').blur(function(){
         debugger;
            if($('#password1').val().length<6){
                $("#password1").popover({
                    title:"test",
                    content:"Must be 6 characters long! Must contain a capital letter"
                }); 
                $("#password1").popover('show');
            }else{
            $("#password1").parent().removeClass('popover');
            }
        });
    })();



   </script>

感谢您的帮助。

Answer 1

您应该使用popover

的隐藏功能

    $("#password1").popover('hide')

Answer 2

使用.popover（'destroy'）代替.popover（'hide'），因为如果再次单击文本框，即使字符数超过6，它也会再次显示。

ConnectivityManager.isActiveNetworkMetered()

$(function() {
  debugger;
  $('#password1').blur(function() {
    debugger;
    if ($('#password1').val().length < 6) {
      $("#password1").popover({
        title: "test",
        content: "Must be 6 characters long! Must contain a capital letter"
      });
      $("#password1").popover('show');
    } else {
      $("#password1").popover('destroy');
    }
  });
})();

Answer 3

请检查

   $(function ()
   {
   debugger;
     $('#password1').blur(function(){
      debugger;      
         if($('#password1').val().length<6){
             $("#password1").popover({
                 title:"test",
                 content:"Must be 6 characters long! Must contain a capital letter"
             }); 
             $("#password1").popover('show');
         }else{
             $("#password1").popover('destroy');
         }
     });
     $('#password1').click(function(){
         if($('#password1').val().length>5){  
             $("#password1").popover('destroy');
         }
     });
 })();

文本框有效时隐藏弹出窗口

3 个答案: