javascript - 如果在 JavaScript 中粘贴文本事件，如何停止触发输入文本事件处理程序？

Question

在我的示例中，我需要两个单独的事件处理程序来处理输入的数据和粘贴的数据。我面临的问题是，对于我粘贴的每个数据，keyup 事件处理程序也会触发。如何阻止它？

代码:

$(".inp-txt").on('keyup', function() {
  console.log("Handler for on keyup is called");
});

$(".inp-txt").on('paste', function() {
  console.log("Handler for on paste is called.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp-txt">

能否请您提供原生 JavaScript 和 jQuery 的解决方案？

Answer 1

在 Keyup even handler 中，您可以检查键代码并确定它是否用于 ctrl + v 然后跳过内部代码执行，它只会执行粘贴事件代码。这是解决方法，因为我们不能只为过去而不是 keyup 绑定(bind)事件。

注意:我已经设置了逻辑来检查是否在 v 之前按下了控制键，但是如果用户按下控制键然后放下要粘贴的想法并尝试按下 v，这将不起作用。

var isCtrl = false;
$(".inp-txt").bind('keyup', function(e) {
    //console.log(e.keyCode);
    //console.log(e.ctrlKey);
    if (e.ctrlKey) {
       isCtrl = true;
    } else if(isCtrl && e.keyCode == 17) {
        isCtrl = false;
    } else {
       isCtrl = false;
       console.log("Handler for keyup bind is called");
     }
});

$(".inp-txt").bind('paste', function() {
  console.log("Handler for paste bind is called.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp-txt">