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

hide popover when textbox is valid

本文关键字：窗口 隐藏 文本 有效      更新时间：2023-09-26

我使用引导弹出窗口显示如果密码小于6个字符。它的工作很好，但当我在文本中点击它显示弹出窗口，甚至文本框的值是有效的。如何在文本框长度有效时隐藏弹出窗口

<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代码我删除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>

谢谢你的帮助。

你应该使用弹出窗口的隐藏功能

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

使用。popover('destroy')代替。popover('hide')，因为如果你再次点击文本框，即使字符超过6，它也会继续显示你。

$(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');
    }
  });
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <h1>Bootstrap popover Example</h1>
  <div>
    <input type="password" id="password1" placeholder="password">
  </div>
</div>

请检查这个

   $(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');
         }
     });
 })();
相关文章：