如果用户在其中粘贴整个文本或字符串，如何检测文本输入区域中的粘贴？

Question

注意：不要将此标记为重复问题，当然这不是。但这与那里的某些问题有关。

有单击事件或触摸事件来检测文本字段中的粘贴。但现在有一个新技巧可以使用移动“快速键盘”Android 键盘将内容粘贴到文本字段中。这使得剪贴板选项可以将预定义的文本粘贴到任何输入字段中。我尝试了几乎所有在线答案，并且此剪贴板可以正常工作，而无需检测浏览器中的任何事件。

所以帮助我解决这个问题，我想检测文本字段中的这个特定剪贴板事件并阻止用户使用它。

<textarea name="msg" placeholder="Type message here...." class="materialize-textarea" onCopy="return false" onDrag="return false" onDrop="return false" onPaste="return false" oncontextmenu="return false" onkeydown="if ((arguments[0] || window.event).ctrlKey) return false"></textarea>

当然，这会阻止桌面或移动设备中的正常粘贴。但是，它无法检测某些剪贴板内容粘贴。

我需要一个真正的解决方案来解决这个问题。

Answer 1

input您可以侦听上的事件，而不是检测是否发生粘贴事件textarea。然后，通过跟踪文本框中字符串的前一长度，您可以查看输入是否更改了多个字符。

请参阅下面的工作示例：

window.onload = function() {
  const textarea = document.querySelector('.materialize-textarea');
  let prev_val = textarea.value;
  let prev = prev_val.length;

  textarea.addEventListener('input', function() {
    let new_len = this.value.length;
    let dif = new_len - prev;
    if (dif > 1) {
      alert("paste detected!");
      textarea.value = prev_val;
    } else {
      prev = new_len;
    }
    prev_val = this.value;
  });
}

<textarea name="msg" placeholder="Type message here...." class="materialize-textarea"></textarea>

尽管如此，这个解决方案确实有其局限性。