如何实现点击按钮向HTML输入框插入表情或GIF的功能？

核心实现逻辑 #

整个功能可以拆分为两个独立模块开发，耦合度低易维护：

• 表情选择面板的显隐控制、表情资源渲染
• 选中内容（emoji表情/GIF）插入到文本框光标指定位置

基础实现代码 #

DOM结构示例 #

<div class="chat-input-wrapper">
  <!-- 表情触发按钮 -->
  <button class="emoji-trigger-btn">😀</button>
  <!-- 表情选择面板，默认隐藏 -->
  <div class="emoji-panel" style="display: none; position: absolute; bottom: 50px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background: #fff;">
    <!-- 静态emoji表情，也可动态循环渲染全量emoji列表 -->
    <span class="emoji-item" style="font-size: 20px; padding: 4px; cursor: pointer;">😀</span>
    <span class="emoji-item" style="font-size: 20px; padding: 4px; cursor: pointer;">😂</span>
    <span class="emoji-item" style="font-size: 20px; padding: 4px; cursor: pointer;">🥰</span>
    <!-- GIF表情示例 -->
    <img class="gif-item" src="your-gif-path.gif" alt="鼓掌" width="24" height="24" style="padding: 4px; cursor: pointer;">
  </div>
  <!-- 输入框，也可替换为contenteditable=true的富文本div -->
  <textarea id="chat-input" style="width: 300px; height: 60px; padding: 8px;"></textarea>
</div>

核心JS逻辑 #

/**
 * 向输入框光标位置插入指定内容
 * @param {HTMLElement} inputEl 输入框DOM节点
 * @param {String} content 要插入的内容
 */
function insertContentAtCursor(inputEl, content) {
  inputEl.focus();
  // 兼容旧版IE
  if (document.selection) {
    const range = document.selection.createRange();
    range.text = content;
    range.select();
    return;
  }
  // 标准浏览器实现
  if (typeof inputEl.selectionStart === 'number') {
    const start = inputEl.selectionStart;
    const end = inputEl.selectionEnd;
    const originValue = inputEl.value;
    // 拼接插入内容后的文本
    inputEl.value = originValue.slice(0, start) + content + originValue.slice(end);
    // 移动光标到插入内容末尾
    inputEl.selectionStart = inputEl.selectionEnd = start + content.length;
    return;
  }
  // 兜底逻辑，直接追加到末尾
  inputEl.value += content;
}

// 表情按钮切换面板显隐
const triggerBtn = document.querySelector('.emoji-trigger-btn');
const emojiPanel = document.querySelector('.emoji-panel');
triggerBtn.addEventListener('click', (e) => {
  e.stopPropagation();
  emojiPanel.style.display = emojiPanel.style.display === 'none' ? 'block' : 'none';
});

// 点击表情插入内容
document.querySelectorAll('.emoji-item, .gif-item').forEach(item => {
  item.addEventListener('click', () => {
    const inputEl = document.getElementById('chat-input');
    let insertContent = '';
    // 区分普通emoji和GIF表情
    if (item.tagName === 'IMG') {
      // 如果用富文本输入框，这里可以直接插入img DOM节点，无需转文本标记
      insertContent = `[GIF:${item.alt}]`;
    } else {
      insertContent = item.innerText;
    }
    insertContentAtCursor(inputEl, insertContent);
  })
})

// 点击面板外区域自动关闭表情面板
document.addEventListener('click', () => {
  emojiPanel.style.display = 'none';
})

优化扩展方向 #

• 若使用富文本输入框（contenteditable="true"的div），GIF表情可以直接渲染为图片插入到输入框中，不需要转文本标记，展示效果和用户体验更好。
• 可以给表情面板加分类、搜索、最近使用表情分组等功能，降低用户查找表情的成本。
• 若需要支持自定义上传GIF，只需要在后台存储上传的GIF资源，前端按统一格式渲染到表情面板即可，插入逻辑和内置表情完全一致。

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