制作一个接受 Emoji 的 1 字符 HTML 输入字段

Question

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

\n\n

<input maxlength=\'1\' value=\'\'>\n

\n\n

显示表情符号，并且可以粘贴 3 字节 Unicode，如 \xe2\x98\x85，但不能粘贴其他表情符号。对于最大长度为 2 的情况也能正常工作。

\n\n

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

\n\n

演示

\n

Answer 1

此行为符合HTML 规范。该属性的定义maxlength说：

约束验证：如果元素具有最大允许值长度，则其脏值标志为 true，其值最后由用户编辑更改（而不是由脚本进行更改），以及元素的代码单元长度value 大于元素的最大允许值长度，则元素过长。

（我的重点。）作为一般规则，Web 平台将字符串视为 16 位代码单元的序列，而不是 Unicode 字符的序列，因此基本多语言平面之外的字符（例如表情符号）被视为长度为 2 。

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