当前位置: 代码迷 >> JavaScript >> 输入时按下和按下时显示Popover
  详细解决方案

输入时按下和按下时显示Popover

热度:125   发布时间:2023-06-03 18:19:37.0

如何复制用户输入的数字并通过javascriptjquery 在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> 

您需要等待用户完成键入后才能显示该号码,这需要使用超时功能延迟警报显示

 $(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> 

您可以在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>