为什么我不能复制粘贴

Question

我用 js 编写了这段代码来验证 html 输入字段中的文本。它工作得很好，除了我无法将任何内容复制/粘贴到文本框中。如何修改它以允许复制/粘贴，同时不丢失验证功能？或者有更好的方法来验证文本框吗？

function checkText(e)
{       
    var ok = /[a-z A-Z]/.test(String.fromCharCode(e.charCode));
    if (!ok)
        e.preventDefault();
}      

Answer 1

正如评论中提到的，粘贴事件没有 charcode 属性。您可以尝试以下方法来处理这两个事件：

function checkText(e)
{       
   var str = String.fromCharCode(e.charCode) || (event.clipboardData || window.clipboardData).getData('text')
   var ok = /[a-z A-Z]/.test(str);
   if (!ok)
     e.preventDefault();
}

因此您可以处理键盘和粘贴事件。不过，粘贴事件必须只有一个字符。

Answer 2

尝试一下：

function checkInput(elem){
  let newValue = elem.value.split("").filter(chr => /[a-z A-Z]/.test(chr)).join("")
  elem.value = newValue;
}

<input onInput="checkInput(this);">

Answer 3

事实证明我的问题是在我的代码中的某个地方，有这样的代码：

document.body.onpaste = (e) => { 
   e.preventDefault(); 
}

preventDefault()

阻止正常的粘贴操作。

我重写了这一行，以仅防止需要它的特定元素（而不是整个主体）的默认设置，然后我能够再次粘贴到我的文本框中

Answer 4

使用剪贴板API

重要提示：这仅适用于安全环境。

要使其在本地开发环境中工作，您必须首先启用安全上下文。

对于 chrome，您需要启用

Insecure origins treated as secure

:

chrome://flags/#Insecure-origins-treated-as-secure

注意：优先使用此 API，而不是已弃用的 document.execCommand() 方法来访问剪贴板。

注意：此 API 在 Web Workers 中不可用（不通过 WorkerNavigator 公开）。

navigator.clipboard
  .readText()
  .then(
    (clipText) => (document.querySelector(".editor").innerText += clipText),
  );

参考：https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API