Показывать Popover при нажатии клавиш и при вводе - PullRequest
Новая
       10

Показывать Popover при нажатии клавиш и при вводе

0 голосов
/ 13 февраля 2019

Как я могу Скопировать номер, введенный пользователем и показать на Popover через javascript или jquery?

Я имею в виду, когда пользователь набирает цифры больше нуля, например: 1000, popover Show 1000.photo

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

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Вы можете сделать это на событии 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>
0 голосов
/ 13 февраля 2019

Вам нужно подождать, пока пользователь закончит ввод, прежде чем показывать номер, для этого вам нужно отложить показ предупреждений с помощью функции тайм-аута 

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