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

Question

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

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

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

<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

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

请参阅下面的工作示例：

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>

虽然，这种解决方案确实有其局限性。