jQuery：可编辑Div内容（含Emoji）无法同步至Input的问题求助

我之前也碰到过类似的坑！keyup事件确实有个致命盲区——它只在键盘按键抬起时触发，像粘贴（不管是Ctrl+V还是右键菜单粘贴）、拖放文本、输入法候选词确认这类非键盘直接输入的操作，完全不会触发它，这就导致表情（或对应的文本编码）没法同步到input里，自然存不到数据库了。

给你几个靠谱的解决思路，亲测好用：

1. 用input事件替代keyup（最省心的方案） #

input事件是专门监听元素内容任何变化的，不管是输入、粘贴、拖放、自动更正，甚至是通过JavaScript修改内容，它都会触发，完美覆盖keyup的所有盲区。

代码示例： #

HTML结构

<div contenteditable="true" id="emojiEditor" class="emoji-picker-container"></div>
<input type="hidden" id="formInput" name="userMessage">

JavaScript同步逻辑

const editorDiv = document.getElementById('emojiEditor');
const formInput = document.getElementById('formInput');

// 监听input事件，实时同步内容
editorDiv.addEventListener('input', () => {
  // 如果你的表情是直接以文本编码（比如:smile:）存在div里，直接取textContent即可
  formInput.value = editorDiv.textContent;
  
  // 要是你的表情是DOM元素（比如带自定义属性的<img>或<span>），需要转成编码的话，看下面的进阶处理
});

2. 进阶：处理DOM类型的表情元素 #

如果你的EmojiPicker是插入的DOM节点（比如<img src="emoji/grin.png" data-code=":grin:">），直接取textContent可能拿到的是空白或者表情字符，这时候需要遍历子元素，把DOM表情转换成对应的文本编码：

自定义内容转换函数 #

function getEditorContentWithEmojiCodes(editorElement) {
  let content = '';
  // 遍历编辑器的所有子节点
  for (const node of editorElement.childNodes) {
    if (node.nodeType === Node.TEXT_NODE) {
      // 文本节点直接追加内容
      content += node.textContent;
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 表情元素取预设的data-code属性值
      const emojiCode = node.getAttribute('data-code');
      content += emojiCode ? emojiCode : node.textContent;
    }
  }
  return content;
}

// 同步时调用这个函数
editorDiv.addEventListener('input', () => {
  formInput.value = getEditorContentWithEmojiCodes(editorDiv);
});

3. 兼容性补充（可选） #

如果需要兼容非常老旧的浏览器（比如IE8及以下），可以再配合propertychange事件一起监听，不过现在绝大多数项目都不用考虑了：

const syncContent = () => {
  formInput.value = getEditorContentWithEmojiCodes(editorDiv);
};

editorDiv.addEventListener('input', syncContent);
// 针对IE8的兼容
editorDiv.addEventListener('propertychange', syncContent);

这样调整后，不管用户是手动输入表情、粘贴带表情的内容，还是用拖放的方式添加内容，编辑器里的所有内容都会实时同步到input中，表单提交时就能完整获取到数据存入数据库了。

内容的提问来源于stack exchange，提问作者Jean