在index.html中集成表情符号选择器：HTML社交输入优化-html教程-PHP中文网

直接用 input[type="text"] 插入 emoji 会出问题，因原生输入框对多码点 unicode 表情（如 ?‍?）处理不一致：ios 显示方块、android/chrome 可能截断或乱码，且 keydown 无法捕获粘贴、语音、系统面板等输入方式。

在index.html中集成表情符号选择器：html社交输入优化

为什么直接用 `input[type="text"]` 插入 emoji 会出问题

原生输入框对 emoji 的处理不一致：iOS 上可能显示为方块，Android 键盘插入的复合 emoji（比如 ?‍?）在 Chrome 中可能被截断或乱码，textarea 也一样。根本原因是 Unicode 表情符号多为多码点序列（如 ZWJ 序列），而部分浏览器/输入法未正确触发 input 事件或未完整传递字符。别指望靠监听 keydown 拦截——用户粘贴、语音输入、系统表情面板插入都绕过它。

用 `emoji-picker-element` 实现零配置集成

这是目前最轻量（仅 ~25KB gzip）、无依赖、支持 Shadow DOM 的现代方案，兼容所有主流浏览器（包括 Safari 16.4+）。它不劫持输入框，而是以“悬浮面板 + 手动插入”方式工作，可控性强。

实操步骤：

在 index.html 的中添加：

<script type="module" src="https://cdn.jsdelivr.net/npm/@joeattardi/emoji-picker-element@%5E3.0.0/dist/index.min.js"></script>

在你要嵌入表情选择器的位置（比如输入框下方）加：
```
<emoji-picker id="picker" data-theme="auto"></emoji-picker>
```

绑定点击事件到输入框（或按钮）：

document.querySelector('#my-input').addEventListener('click', () => {<br>  document.querySelector('#picker').toggle();<br>});

监听选择事件并插入到光标位置：

document.querySelector('#picker').addEventListener('emoji-click', e => {<br>  const input = document.querySelector('#my-input');<br>  const pos = input.selectionStart;<br>  const text = input.value;<br>  input.value = text.slice(0, pos) + e.detail.unicode + text.slice(pos);<br>  input.setSelectionRange(pos + e.detail.unicode.length, pos + e.detail.unicode.length);<br>});

`contenteditable` 区域比 `input` 更适合 emoji 输入

如果你需要富文本能力（比如混排文字、emoji、甚至未来加 @ 提及），硬塞 emoji 到 input 是自找麻烦。改用 div[contenteditable="true"] 可天然保留 emoji 渲染完整性，且支持光标精确定位。

CAPTURELAB

一款面向游戏玩家的AI游戏视频工具，可以自动识别和整理游戏精彩片段，帮助玩家更快制作游戏集锦视频。

下载

关键注意点：

必须设置 role="textbox" 和 aria-label 保证可访问性
禁用默认右键菜单（oncontextmenu="return false"），否则 emoji 插入后右键会丢失光标
监听 input 事件取值时，用 el.innerText 而非 textContent，后者会把换行转成 \n，前者更贴近用户所见

提交前需过滤掉不可见控制字符：

value.replace(/[\u200b-\u200f\u202a-\u202e]/g, '')

移动端键盘弹起时表情面板被顶飞怎么办

这是 iOS Safari 的经典 bug：软键盘展开后，position: fixed 元素（比如 emoji-picker-element 默认定位）会错误跟随 viewport 缩放，导致面板飘到页面顶部之外。不是 z-index 问题，是渲染层错位。

解决方法只有两个有效：

强制关闭 picker 面板的 fixed 定位，在初始化后重写其内部样式：

const picker = document.querySelector('#picker');<br>picker.addEventListener('open', () => {<br>  const panel = picker.shadowRoot.querySelector('.emoji-picker');<br>  panel.style.position = 'absolute';<br>  panel.style.bottom = '100%';<br>});