当前位置：首页 > JavaScript

js实现评论发送表情

2026-01-31 04:12:37JavaScript

实现评论发送表情的步骤

准备工作 确保有一个评论输入框和一个表情选择器，通常表情选择器可以是一个弹出层或下拉菜单。

HTML结构 创建基本的HTML结构，包括评论输入框和表情选择按钮。

<div class="comment-box">
  <textarea id="comment-input" placeholder="输入评论..."></textarea>
  <button id="emoji-btn">选择表情</button>
  <div id="emoji-picker" class="hidden">
    <!-- 表情列表 -->
    <span class="emoji">😀</span>
    <span class="emoji">😂</span>
    <span class="emoji">😍</span>
    <!-- 更多表情... -->
  </div>
</div>

CSS样式 添加必要的CSS样式，确保表情选择器可以正常显示和隐藏。

.hidden {
  display: none;
}

.emoji {
  cursor: pointer;
  font-size: 20px;
  margin: 5px;
}

.emoji:hover {
  transform: scale(1.2);
}

JavaScript逻辑 实现表情选择器的显示/隐藏功能，并将选中的表情插入到评论输入框中。

document.getElementById('emoji-btn').addEventListener('click', function() {
  const picker = document.getElementById('emoji-picker');
  picker.classList.toggle('hidden');
});

document.querySelectorAll('.emoji').forEach(emoji => {
  emoji.addEventListener('click', function() {
    const input = document.getElementById('comment-input');
    input.value += this.textContent;
    document.getElementById('emoji-picker').classList.add('hidden');
  });
});

进阶功能

动态加载表情 如果需要更丰富的表情库，可以使用第三方表情库或API动态加载表情。

// 示例：使用emoji-api动态加载表情
fetch('https://emoji-api.com/emojis')
  .then(response => response.json())
  .then(data => {
    const picker = document.getElementById('emoji-picker');
    data.forEach(emoji => {
      const span = document.createElement('span');
      span.className = 'emoji';
      span.textContent = emoji.character;
      span.addEventListener('click', function() {
        document.getElementById('comment-input').value += this.textContent;
      });
      picker.appendChild(span);
    });
  });

保存评论 将带有表情的评论保存到服务器或本地存储。

document.getElementById('submit-btn').addEventListener('click', function() {
  const comment = document.getElementById('comment-input').value;
  // 保存逻辑
  console.log('评论内容:', comment);
});