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

【问题标题】：How to get all of the pasted string, in input which has a maxLength attribute?如何在具有 maxLength 属性的输入中获取所有粘贴的字符串？
【发布时间】：2022-03-02 19:30:11
【问题描述】：

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

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

例如，用这个字符串检查下面的sn-p：

“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>

【问题讨论】：

如果您需要更多，为什么要将 maxLength 设置为 5？
@RahulBhobe 这是来自较大脚本的一小段代码，我需要所有字符串，但 maxLength 是必需的
在 JavaScript 中检查长度
理想情况下，您不能通过将输入限制为某个有限长度来获取整个字符串。所以，如果你能告诉我们你到底想用整个字符串实现什么。会有帮助的
OK - 据我所知，您看到的行为是预期的。似乎发布了另一个答案，直接从剪贴板而不是事件中读取 - 如果这是你想要的。

标签： javascript html string clipboard paste

【解决方案1】：

考虑使用事件中的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 支持。

【讨论】：

【解决方案2】：

您可以通过函数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>

【讨论】：

【解决方案3】：

如果粘贴的字符串预计会更大，请设置更高的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>

【讨论】：