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

Question

我想使我的用户可以选择在输入字段中输入EMoji字符。我认为在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的代码点（如Emojis）都算作两个代码单元。这说明了您所看到的行为。