輸入時按下和按下時顯示Popover

Question

如何復制用戶輸入的數字並通過javascript或jquery 在Popover上顯示？

我的意思是，當用戶鍵入大於零的數字時，例如： 1000 ，popover Show 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>

輸入時按下和按下時顯示Popover

問題描述

2 個解決方案

解決方案1
1 已采納 2019-02-13 14:21:10

解決方案2
0 2019-02-13 14:25:19

輸入時按下和按下時顯示Popover

問題描述

2 個解決方案

解決方案1 1 已采納 2019-02-13 14:21:10

解決方案2 0 2019-02-13 14:25:19

解決方案1
1 已采納 2019-02-13 14:21:10

解決方案2
0 2019-02-13 14:25:19