问题描述
对于我认为的基本问题找不到任何东西:
当您将剪贴板中的字符粘贴到设置了 maxLength 属性的 HTML 元素中时,当整个文本不适合 maxLength 时,似乎只会插入一段复制的文本。
使用 Chrome 89.0.4389.90(官方版本)和 Firefox 78.8.0esr 测试,行为相同。
是否有关于该行为的规范或标准? 是否已经就此进行过任何讨论?
对不起,如果这是一个愚蠢的问题,也许我在这里遗漏了一些东西。
但 IMO 这种行为不是一件好事:我会导致数据丢失!不同意?
想象一下,您复制/粘贴一些 UUID、SHA-1 校验和、部分代码或法律文本,其中每个词都很重要:碎片可能会悄悄丢失!?甚至没有警告告诉您已达到 maxLength?
从键盘输入单个字符时,情况有所不同:您会立即获得视觉反馈,因此不会错过限制。
好的,通常文本输入字段可能不使用 maxLength...但是如果您在此后面有一个 sql 数据库,其中列具有固定长度,例如 VARCHAR(500),您希望限制为 500 个字符(假设 sql DB 使用字符长度语义)
所以我认为它应该粘贴全部或不粘贴,而不是文本片段。
最好的问候, 塞布
解决方法
不幸的是,您面临的是 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
。