html - 制作一个接受表情符号的 1 个字符的 HTML 输入字段

Question

我正在尝试制作 1 个字符的输入字段，但我发现无法粘贴表情符号或使用浏览器启动的 OSX 表情符号选择器。

<input maxlength='1' value='👼'>

表情符号已显示，可以粘贴 3 字节的 Unicode，如 ★，但不能粘贴其他表情符号。它也适用于最大长度为 2 的情况。

这是浏览器错误还是符合 HTML 规范？我在 Chrome 和 Firefox 上看到了同样的情况。

Demo

Answer 1

此行为符合 HTML spec . maxlength 属性的定义是:

Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the code-unit length of the element's value is greater than the element's maximum allowed value length, then the element is suffering from being too long.

(我的强调。)作为一般规则，网络平台将字符串视为 16 位代码单元的序列，而不是 Unicode 字符的序列，因此基本多语言平面之外的字符(例如表情符号)被视为长度为二。

明显的解决方法是设置 maxlength=2(或完全放弃它)并在 JavaScript 中进行验证。