如何制作HTML Emoji表情面板选择器？

本文共计715个文字，预计阅读时间需要3分钟。

直接上手即可使用，核心是使用 `input` 触发弹层、`emoji-picker-element`（Web Component）或手动渲染 Unicode 表情序列。推荐优先使用 Web Component 方案——它体积小、无构建依赖、支持搜索和分组，且已通过 Chrome/Firefox/Safari 兼容性验证。

为什么不用 contenteditable 或 textarea 直接插入？

因为光标位置控制复杂，尤其在 iOS Safari 下容易丢失焦点或插入错位。更稳的做法是：把 Emoji 当作普通字符串拼接进目标元素的 value 或 textContent，再手动聚焦回输入框末尾。

• 对 input[type="text"]：用 input.value += emoji，然后 input.setSelectionRange(input.value.length, input.value.length)
• 对 textarea：同理，但需注意换行符和光标在多行中的偏移计算
• 避免用 document.execCommand —— 已废弃，Safari 15+ 不支持

emoji-picker-element 的正确加载与事件绑定

它不是 npm 包，而是通过 ES Module 动态导入的 Web Component。