问题描述
如何复制用户输入的数字并通过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>
1楼
madalinivascu
1
已采纳
2019-02-13 14:21:10
您需要等待用户完成键入后才能显示该号码，这需要使用超时功能延迟警报显示
$(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>
2楼
Daut
0
2019-02-13 14:25:19
您可以在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>