如何将 onkeyup 和 onkeydown 用于输入标签？

Question

我有一个输入字段，我想根据 keyup 和 keydown 进行一些计算。我尝试使用 onkeyup 和 onkeydown 函数，但是当我按下键盘上的某个键时，它会在控制台中同时打印 "keyup" 和 "keydown"。还有其他功能可以分别区分 keyup 和 keydown 事件吗？我的输入标签在 html table 内。这是我的代码

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

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

Answer 1

将 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

Answer 2

建议不要混合 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 3

您不需要 keyup 和 keydown，两者将使用相同的键码触发。

你应该使用其中之一。不同之处在于处理延迟。

例如，如果您执行 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");
});

如何将 onkeyup 和 onkeydown 用于输入标签？

How to use onkeyup and onkeydown for an input tag?

javascript

keydown

keyup