html maxlength 属性后面的代码是如何工作的答案

【问题标题】：How does the code behind the html maxlength attribute workshtml maxlength 属性后面的代码是如何工作的
【发布时间】：2020-01-27 22:32:17
【问题描述】：

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

【问题讨论】：

请发布您的实际代码。
您能否展示一个未强制执行maxlength 的html 示例，并指出出现这种情况的操作系统、浏览器和浏览器版本？也许对它进行一些小的修改可能会使其工作。
我正在使用 Windows 10 操作系统上的 Google chrome 版本 77.0.3865.90，并且我正在使用检查工具来检查移动设备中的行为。 @LonnieBest
我很抱歉由于我工作的组织的限制而无法发布完整的代码。但我通过将 maxlength 属性放在输入标签中进行测试。此外，当我尝试使用 maxlength 属性时，我不会尝试强制执行任何 javascript 代码来完成相同的工作。
与此同时，堆栈溢出时已经出现了同样的问题：stackoverflow.com/questions/17439487/…

标签： javascript html

【解决方案1】：

在这里引用MDN：

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

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

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

&lt;input type="text" maxlength="2" /&gt;

...因此，您可能需要在代码中手动处理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')

&lt;input type="text" maxlength="2" /&gt;

【讨论】：

是的，这是一种方法，但我们正在做的是获取最大允许长度的子字符串。问题是当用户在两者之间的任何地方输入文本时。现在子字符串函数将从末尾删除字符但应该发生的是不允许用户输入（由 maxlength 属性完成）
我不确定我是否理解。您是否使用来自一个文本框的输入以编程方式设置另一个？
不，现在我只是在输入字段中输入值并检查它是否阻止用户在输入字段中输入文本。

【解决方案2】：

我了解到您只想了解 maxlength 应该如何工作。以下是规范的引述：

4.10.5.3.1。 maxlength 和 minlength 属性

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

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

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

来源：§4.10.5.3.1

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

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

【讨论】：

感谢分享参考，但它没有解释 maxlength 如何阻止用户输入文本并将字符串长度与 maxlength 进行比较，是否有任何文档可以解释这一点。谢谢
这正是我在应用程序中使用 maxlength 属性的方式。
这就是我所知道的。您是否单击了引用下方的源链接？该规范具有可点击的超链接，可以深入了解每个具有详细含义的术语。比如去here，然后点击“表单控件最大长度属性”，它会显示more details关于逻辑。