Как использовать onkeyup и onkeydown для тега ввода?

Question

У меня есть поле ввода, и я хочу сделать некоторые вычисления в зависимости от нажатия клавиш и нажатия клавиш. Я попытался использовать функции onkeyup и onkeydown, но когда я нажимаю клавишу на клавиатуре, она печатает как «keyup», так и «keydown» в консоли. Есть ли какая-либо другая функция, которая разделяет события keyup и keydown отдельно? Мои входные теги находятся внутри таблицы. Это мой код

  $('table input').on('keyup', function(){
      console.log("keyup");
  });

  $('table input').on('keydown', function(){
      console.log("keydown");
  });

Answer 1

Предложил бы не смешивать jQuery и чистый JavaScript. Все, что вам нужно, это добавить keyup keydown вместо input:

$('table input').on('keyup keydown', function() {
  var parent = $(this).closest('tr');
  var value = parent.find('[name="item_value[]"]').val();
  var amount = parent.find('[name="quantity[]"]').val();
  var total_cost = value * amount;
  parent.find('[name="total_cost[]"]').val(total_cost);
  total_value = total_value + total_cost;
  $('#total').val(total_value);
});

Answer 2

Вам не нужно вводить данные и нажимать клавиши, оба будут срабатывать с одинаковым кодом.

Вы должны использовать один или другой. Разница будет в задержке обработки.

Например, если вы делаете KeyUp, в зависимости от продолжительности удержания клавиши, KeyUp будет срабатывать только после отпускания этой клавиши - в отличие от KeyDown.

Ссылаясь на W3Schools, вы можете добиться этого с помощью: (Где keycode = Восьмеричное значение, определенное в ASCII (https://www.genuinecoder.com/wp-content/uploads/2012/07/asciifull.gif)

(Также, запустив этот пример, вы заметите, что быстрые keyDowns и keyUps могут вызывать конфликты в процессе обработки. Вы должны использовать одно или другое, но не оба.)

$("input").keyup(function(e){
   alert(e.keyCode);
    $("input").css("background-color", "pink");
});
$("input").keydown(function(e){
    alert(e.keyCode);
    $("input").css("background-color", "pink");
});

Answer 3

изменить input на keyup:

$('table input').on('keyup', function(){
    var parent = $(this).closest('tr');
    var value = parent.find('[name="item_value[]"]').val();
    var amount = parent.find('[name="quantity[]"]').val();
    var total_cost = value * amount;
    parent.find('[name="total_cost[]"]').val(total_cost);
    total_value = total_value + total_cost;
    document.getElementById('total').value = total_value;
});

Подробнее о keyup