输入 keydown 和 keyup 时显示 Popover

Question

如何复制用户输入的数字并通过javascript或jquery显示在Popover上？

我的意思是当用户键入大于零的数字时，例如：1000，弹出窗口显示 1000。

$(document).ready(function() {
    //this calculates values automatically 
    getPriceAndPopUp();
    $("#price").on("keydown keyup", function() {
     getPriceAndPopUp();   
    });
});

function getPriceAndPopUp() {
    var price = document.getElementById('price').value;
    if (!isNaN(price) && price > 0) {
        alert(price);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <form>
    Price:<br>
    <input type="number" 
      name="price" 
      id="price" 
      class="form-control" 
      min="0" 
      required />
  </form> 
</body>

Answer 1

您需要等待用户完成输入才能显示号码，为此您需要使用超时功能延迟警报显示

$(document).ready(function() {
  var timeout;
  //this calculates values automatically 
  getPriceAndPopUp();
  $("#price").on("keydown keyup", function() {
    clearTimeout(timeout);
    timeout = getPriceAndPopUp();
  });
});

function getPriceAndPopUp() {
  var price = document.getElementById('price').value;

  return setTimeout(function() {

    if (!isNaN(price) && price > 0) {
      $('[data-content]').attr('data-content',price);
      $('[data-toggle="popover"]').popover('show');
    }
  }, 400);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>

  <form>
    Price:<br>
    <input type="number" name="price" id="price" class="form-control" min="0" required data-toggle="popover" data-placement="bottom" data-content="0"/>
  </form>


</body>

Answer 2

您可以在 blur 活动中完成。

$(document).ready(function() {
  //this calculates values automatically 
  getPriceAndPopUp();
  $("#price").on("blur", function() {
    getPriceAndPopUp();
  });
});

function getPriceAndPopUp() {
  var price = document.getElementById('price').value;
  if (!isNaN(price) && price > 0) {
    alert(price);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <form>
    Price:<br>
    <input type="number" name="price" id="price" class="form-control" min="0" required />
  </form>
</body>

输入 keydown 和 keyup 时显示 Popover

Show Popover when keydown and keyup on input

html

javascript

jquery

popover