带有 UTF8 补充字符的 HTML 输入的最大长度

Question

我想为我的用户启用在输入字段中输入表情符号字符的选项。我认为在 2019 年，这应该像将网站的元字符集设置为 UTF-8 一样简单。但是，在 Chrome 或 Firefox 中进行测试时，以下示例以不同方式计算补充 UTF-8 字符（长度为 4 个字节）。
在第一个输入中，我只能在便便之后再输入 2 个字符。在第二个输入中，我仍然可以在 ‰ 之后再输入 3 个字符，长度为 3 个字节。

是什么导致了这种不一致的行为？是否还有其他 4 字节字符的 HTML 元设置？它在 Edge 17 中运行良好。即使是垃圾 IE 11 也能正确计算长度。

<input type="text" value="????" maxlength="4" />
<input type="text" value="‰" maxlength="4" />

我的测试用例： http://jsfiddle.net/L726ryea/7/

Answer 1

HTML5 spec 表示 maxlength 适用于 JavaScript string length，这是 UTF-16 代码单元的数量。因此，超过 0xFFFF 的代码点（如 Emoji）算作两个代码单元。这解释了您所看到的行为。