【问题标题】:Show popover on text box if value is exceeded如果超出值,则在文本框上显示弹出框
【发布时间】:2016-03-22 07:37:51
【问题描述】:

我是 JavaScript 新手。我对javascript一无所知,我仍在学习。我需要一点帮助。
我有一个带有数字的标签。用户必须在文本框中手动输入一个数字。如果用户输入的值超过标签中写入的值,则应在输入框上方显示一个弹出框。
我试图这样做,但无论如何都会显示弹出窗口。我希望仅在满足条件时才显示弹出框。
另外,谁能告诉我如何在弹出内容中包含锚标签和<br>标签?

$(document).ready(function(){
  var Err2 = $("#max").val();
  $('input').blur(function(){
    if( $(this).val() >= Err2 ) {
      $(this).popover({
        title: 'Warning!',
        content: 'sfgjksfhgjkhdghdfgjkdfjkgdfjkgn <a href=#">fgdfgdg</a>jhksdjhfdfsdgjlk',
        placement: 'bottom'
      }).popover('show');
    } else {
      $(this).popover('destroy');
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
content=<span id="max">5</span>
<input type="text" class="form-control">

http://www.bootply.com/suPp4ThGxq

【问题讨论】:

    标签: javascript jquery html twitter-bootstrap bootstrap-popover


    【解决方案1】:

    首先,span 没有 value 属性。所以$("#max").val() 将返回""

    其次,当您从 DOM 元素中读取值时,它们会被读取为字符串。最好使用parseInt()parseFloat() 进行检查。

    Updated Code

    【讨论】:

      【解决方案2】:

      只需将var Err2 = $("#max").val(); 替换为var Err2 = $("#max").text();

      对于 span 它返回 "" for val()

      【讨论】:

        【解决方案3】:

        像这样使用text() 而不是val()

        var Err2=$("#max").text();
        

        此外,您必须测试您的字段中是否有数字或文本。

        查看此帖子以测试字段是否包含数字:Javascript regexp number only check

        【讨论】:

          【解决方案4】:

          只需将您的脚本替换为下面的脚本,它就会按预期工作。

          <script>
          $(document).ready(function(){
            var Err2 = $("#max").text();
            $('input').keyup(function(){
              if( $(this).val().length >= Err2 ) {
                $(this).popover({
                  title: 'Warning!',
                  content: 'sfgjksfhgjkhdghdfgjkdfjkgdfjkgn <a href=#">fgdfgdg</a>jhksdjhfdfsdgjlk',
                  placement: 'bottom'
                }).popover('show');
              } else {
                $(this).popover('destroy');
              }
            })
          });
          </script>
          

          【讨论】:

            猜你喜欢
            • 2018-08-24
            • 1970-01-01
            • 2012-08-25
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2013-02-28
            • 1970-01-01
            • 2015-03-30
            相关资源
            最近更新 更多