onpaste 事件替换文本框中的文本答案

【问题标题】：onpaste event replaces text in textboxonpaste 事件替换文本框中的文本
【发布时间】：2022-03-15 00:27:59
【问题描述】：

我对 JS 中的 onpaste 事件有疑问。我需要将剪贴板内容分成两半，将其复制到两个文本框中。我正在使用下面的代码：

function paste(){
document.getElementById("txt1").value = clipboarddata.substr(0,2);
document.getElementById("txt2").value = clipboarddata.substr(2,4);
}

在onpaste 事件上调用此函数。内容被粘贴，但在函数之后，整个字符串再次粘贴到粘贴数据的框中。

我可以通过使用cancelbubble 等在paste() 函数中取消事件来取消事件吗？

【问题讨论】：

标签： javascript dom-events onpaste

【解决方案1】：

我知道这有点晚了，但是对于任何寻找这个的人来说，这里有一种方法：

在你完成你必须做的事情之后，你必须return false; 这将阻止默认处理程序运行。

这是一个演示：

HTML

<textarea id="txt1"></textarea>
<textarea id="txt2"></textarea>

Javascript

var myElement = document.getElementById('txt1');
myElement.onpaste = function (e) {
   var pastedText = undefined;
   if (window.clipboardData && window.clipboardData.getData) { // IE
      pastedText = window.clipboardData.getData('Text');
   } else if (e.clipboardData && e.clipboardData.getData) {
      pastedText = e.clipboardData.getData('text/plain');
   }
   document.getElementById("txt1").value = pastedText.substr(0, pastedText.length / 2);
   document.getElementById("txt2").value = pastedText.substr(pastedText.length / 2 + 1, pastedText.length);
   return false; // Prevent the default handler from running.
};

jsfiddle demo

【讨论】：