如何在具有 maxLength 属性的输入中获取所有粘贴的字符串？

Question

我需要在具有 maxLength 属性的输入中获取所有粘贴的字符串。

但在 'onpaste' 事件中没有属性获取所有粘贴的字符串。

例如，使用以下字符串检查以下代码段：

“AAAAA-BBBBB-BBBBB-BBBBB-BBBBB”

输出为：“AAAAA”

但我需要所有字符串。

const onPasteFn = (e) => {
  setTimeout(() => document.getElementById("demo").innerHTML = e.target.value, 0)
}

<input type="text" maxLength="5" onpaste="onPasteFn(event)" />

<p id="demo"></p>

Answer 1

如果希望粘贴的字符串更大，请设置更高的 maxLength。您的示例输入字符串的长度为 29。所以这里是修改后的代码 maxLength=30.

const onPasteFn = (e) => {
  setTimeout(() => document.getElementById("demo").innerHTML = e.target.value, 0)
}

<input type="text" maxLength="30" onpaste="onPasteFn(event)" />

<p id="demo"></p>

Answer 2

考虑使用活动中的 clipboardData，您可以使用 getData() 来抓取从剪贴板粘贴的文本，如下所示：

const onPasteFn = (e) => {
  document.getElementById("demo").textContent = (e.clipboardData || window.clipboardData).getData('text');
}

<input type="text" maxLength="5" onpaste="onPasteFn(event)" />

<p id="demo"></p>

请参阅文档中的示例 here。请注意，|| window.clipboardData 的后备用于 IE 支持。

Answer 3

您可以通过函数 getData() 访问 clipboardData，并打印它而不是 e.target.value()。如果您将它存储在一个临时变量中，就像我在示例中所做的那样，您就可以对粘贴的字符串进行进一步的阐述。

它适用于合理最新版本的浏览器（例如FF 22+）。

const onPasteFn = (e) => {
  var myData = e.clipboardData.getData("text/plain");
  
  setTimeout(() => document.getElementById("demo").innerHTML = myData, 0)
}

<input type="text" maxLength="5" onpaste="onPasteFn(event)" />

<p id="demo"></p>

如何在具有 maxLength 属性的输入中获取所有粘贴的字符串？

How to get all of the pasted string, in input which has a maxLength attribute?

javascript

html

string

clipboard

paste