当前位置：首页 > JavaScript

js实现表情评论

2026-02-03 02:06:35JavaScript

实现表情评论的基本思路

表情评论功能通常包括输入框、表情选择面板和评论展示区域。核心是通过JavaScript动态插入表情符号对应的HTML或Unicode字符到输入框，并将内容提交后渲染到页面。

HTML结构示例

<div class="comment-container">
  <textarea id="comment-input" placeholder="输入评论..."></textarea>
  <div class="emoji-panel">
    <span class="emoji" data-emoji="😀">😀</span>
    <span class="emoji" data-emoji="😂">😂</span>
    <!-- 更多表情... -->
  </div>
  <button id="submit-btn">提交评论</button>
  <div class="comment-list"></div>
</div>

JavaScript实现步骤

监听表情点击事件 表情选择面板中的每个表情元素需要绑定点击事件，将对应的表情符号插入到输入框的光标位置。

document.querySelectorAll('.emoji').forEach(item => {
  item.addEventListener('click', function() {
    const emoji = this.getAttribute('data-emoji');
    const input = document.getElementById('comment-input');
    const startPos = input.selectionStart;
    const endPos = input.selectionEnd;
    input.value = input.value.substring(0, startPos) + emoji + input.value.substring(endPos);
    input.focus();
    input.selectionStart = input.selectionEnd = startPos + emoji.length;
  });
});

提交评论处理 点击提交按钮时，获取输入框内容并添加到评论列表，同时清空输入框。

js实现表情评论

document.getElementById('submit-btn').addEventListener('click', function() {
  const content = document.getElementById('comment-input').value.trim();
  if (content) {
    const commentList = document.querySelector('.comment-list');
    const commentItem = document.createElement('div');
    commentItem.className = 'comment-item';
    commentItem.innerHTML = content;
    commentList.prepend(commentItem);
    document.getElementById('comment-input').value = '';
  }
});

增强功能：动态加载表情

可以通过第三方表情库（如Twemoji）或自定义表情包实现更丰富的选择。动态加载表情通常需要创建分页或分类面板。

// 示例：动态加载一组表情
const emojis = ['😊', '🤔', '🎉', '❤️', '🔥'];
const panel = document.querySelector('.emoji-panel');
emojis.forEach(emoji => {
  const span = document.createElement('span');
  span.className = 'emoji';
  span.textContent = emoji;
  span.setAttribute('data-emoji', emoji);
  panel.appendChild(span);
});

样式优化建议

为表情面板和评论区域添加基础CSS样式，提升用户体验：

js实现表情评论

.emoji-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.emoji {
  cursor: pointer;
  font-size: 24px;
}
.comment-item {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  white-space: pre-wrap;
}

安全注意事项

直接渲染用户输入的内容可能导致XSS攻击。建议在插入评论前对内容进行转义处理：

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

完整代码示例

整合上述模块的完整实现：

<!DOCTYPE html>
<html>
<head>
  <style>
    .emoji-panel { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
    .emoji { cursor: pointer; font-size: 24px; }
    .comment-item { border-bottom: 1px solid #eee; padding: 10px 0; }
    textarea { width: 100%; height: 80px; }
  </style>
</head>
<body>
  <div class="comment-container">
    <textarea id="comment-input"></textarea>
    <div class="emoji-panel"></div>
    <button id="submit-btn">提交</button>
    <div class="comment-list"></div>
  </div>

  <script>
    // 初始化表情
    const emojis = ['😀','😂','😊','🤔','🎉','❤️','🔥'];
    const panel = document.querySelector('.emoji-panel');
    emojis.forEach(emoji => {
      const span = document.createElement('span');
      span.className = 'emoji';
      span.textContent = emoji;
      span.setAttribute('data-emoji', emoji);
      panel.appendChild(span);
    });

    // 表情点击事件
    document.querySelectorAll('.emoji').forEach(item => {
      item.addEventListener('click', function() {
        const emoji = this.getAttribute('data-emoji');
        const input = document.getElementById('comment-input');
        const startPos = input.selectionStart;
        const endPos = input.selectionEnd;
        input.value = input.value.substring(0, startPos) + emoji + input.value.substring(endPos);
        input.focus();
        input.selectionStart = input.selectionEnd = startPos + emoji.length;
      });
    });

    // 提交评论
    document.getElementById('submit-btn').addEventListener('click', function() {
      const content = document.getElementById('comment-input').value.trim();
      if (content) {
        const commentList = document.querySelector('.comment-list');
        const commentItem = document.createElement('div');
        commentItem.className = 'comment-item';
        commentItem.textContent = content; // 使用textContent避免XSS
        commentList.prepend(commentItem);
        document.getElementById('comment-input').value = '';
      }
    });
  </script>
</body>
</html>

此实现提供了基础表情评论功能，可根据需求扩展表情分类、用户@功能或图片上传等高级特性。