html maxlength属性背后的代码如何工作

Question

我正在移动应用程序中使用HTML maxlength属性，但是它不起作用。我尝试了其他几种方法来限制input [type = text]中的最大长度，但是没有一种方法可以像maxlength在Web浏览器中一样有效。所以我想知道maxlength属性背后的编码逻辑。

Answer 1

在此处引用MDN：

如果该字段的文本值的长度大于maxlength UTF-16代码单元的长度，则输入将无法通过约束验证。约束验证仅在用户更改值时应用。

[我看到您标记了JavaScript ...所以，您的问题很可能是maxlength不能阻止编程更改超过该字符数]。例如：

document.querySelector('input').value = 'testing'

<input type="text" maxlength="2" />

...所以，您可能需要手动处理代码中的maxlength。也许像这样：

// NOTE: Truncates based on maxlength
const setTextInputValue = (el, str) => {
  const maxlength = +el.getAttribute('maxlength')
  el.value = str.substring(0, maxlength)
}

const el = document.querySelector('input')
setTextInputValue(el, 'testing')

<input type="text" maxlength="2" />

Answer 2

我了解您仅对了解maxlength应该如何工作感兴趣。以下是该规范的引用：

4.10.5.3.1。 maxlength和minlength属性

maxlength属性，当应用时，是表单控件的maxlength属性由输入元素的脏值标志控制。

minlength属性，当应用时，是一个表单控件minlength属性由输入元素的脏值标志控制。

如果输入元素具有最大允许值长度，则元素的value属性值的代码单位长度必须为等于或小于元素的最大允许值长度。

来源：§4.10.5.3.1

[如果您要测试的浏览器不符合规范，请向该浏览器提交错误报告。同时，您可以使用JavaScript来强制使用最大长度。

但是，即使您确实在客户端执行此操作，也仍然需要在服务器端执行此操作，因为在发送到服务器之前很容易破解客户端代码并规避所有预期的限制。