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

Question

找不到我认为是基本问题的任何内容：

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

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

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

抱歉，如果这是一个愚蠢的问题，可能我在这里遗漏了什么。

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

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

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

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

所以我认为它应该全部粘贴或全部不粘贴，而不是文本片段。

元素中是否有attribute/CSS样式来控制这个？

此致，塞布

Answer 1

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

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

<input type="text" id="value" onInput="checkLength();"/>

以上代码在输入值超过指定长度时清空输入域，这里不需要maxlength属性。如果您只想将此规范用于粘贴事件，则可以使用 onpaste 属性而不是 oninput.

Answer 2

对于来到这里的其他人，请参阅对类似问题的回答：（使用事件中的 clipboardData 获取所有粘贴的文本）

HTML INPUT element with maxLength loses text when paste from clipboard