从剪贴板粘贴时，具有 maxLength 的 HTML INPUT 元素会丢失文本答案

【问题标题】：HTML INPUT element with maxLength loses text when paste from clipboard从剪贴板粘贴时，具有 maxLength 的 HTML INPUT 元素会丢失文本
【发布时间】：2021-03-30 16:30:09
【问题描述】：

找不到任何我认为是基本问题的东西：

当您将剪贴板中的字符粘贴到设置了 maxLength 属性的 HTML 元素中时，当整个文本不适合 maxLength 时，似乎只插入了一部分复制的文本。

使用 Chrome 89.0.4389.90（官方构建）和 Firefox 78.8.0esr 测试，行为相同。

是否有关于该行为的规范或标准？是否已经对此进行过任何讨论？

对不起，如果这是一个愚蠢的问题，也许我在这里遗漏了一些东西。

但是 IMO 这种行为并不是一件好事：我会导致数据丢失！不同意？

想象一下，您复制/粘贴一些 UUID、SHA-1 校验和、部分代码或用于每个单词都很重要的法律文本：片段可能会悄无声息地丢失！？甚至没有警告告诉您已达到 maxLength？

从键盘输入单个字符时，情况有所不同：您会立即获得视觉反馈，因此您不会错过限制。

好的，通常文本输入字段可能不使用 maxLength...但是如果您有一个 SQL 数据库，其中列具有固定长度，如 VARCHAR(500)，您希望限制为 500 个字符（假设 SQL 数据库使用字符长度语义）

所以我认为它应该粘贴全部或不粘贴，但不能粘贴文本。

元素中是否有属性/CSS 样式来控制它？

最好的问候，赛博

【问题讨论】：

标签： html input clipboard paste maxlength

【解决方案1】：

不幸的是，你面对的是maxlength属性的预期工作。捕获小于或等于maxlength 的部分是足够聪明的。如果你不想让它工作，你必须通过JavaScript手动处理它，它非常简单。这是一个简单的例子：

function checkLength() {
  var input = document.getElementById("value")
  if (input.value.length >= 5) // 5 is your maxlength
     input.value='';
}

&lt;input type="text" id="value" onInput="checkLength();"/&gt;

上面的代码在值超过指定长度时清空输入字段，这里不需要maxlength属性。如果您希望此规范仅用于粘贴事件，您可以使用 onpaste 属性而不是 oninput。

【讨论】：

感谢您的回答。

【解决方案2】：

对于其他来到这里的人，请参阅类似问题的答案： https://stackoverflow.com/a/63213336 （使用事件中的clipboardData 来获取所有粘贴的文本）

【讨论】：