javascript - html网页中的表情符号选择器

Question

我用 socket.io 制作了一个实时聊天网页，我发现如果还有一个表情符号选择器按钮可以调出一个表情符号列表，那就太棒了，就像你可以使用“windows 键 + .句号”一样，但是取而代之的是，只是一个按钮，可以显示这样的标签。

我是否需要使用任何 API，或者是否只有我可以制作的手动功能，但在单击按钮时将所有可用的表情符号复制到选项卡中。至少，有什么最简单的选择吗？

然后当点击“smile emojj”时，我想让它出现一个包含所有表情符号的 div，例如:

Answer 1

这是一个非常简单的版本，但您可以尝试这样的操作。我只是从 here 复制并粘贴了几个表情符号进入 HTML，然后使用一些 JS 将它们添加到输入的末尾。如果您想要更高级，您可以尝试让它在您单击表情符号时不会失去焦点并将其插入光标之后而不是值的末尾。

function addEmoji(emoji) {
  let inputEle = document.getElementById('input');
  
  input.value += emoji;
}

function toggleEmojiDrawer() {
  let drawer = document.getElementById('drawer');
  
  if (drawer.classList.contains('hidden')) {
    drawer.classList.remove('hidden');
  } else {
    drawer.classList.add('hidden');
  }
}

.emoji-drawer {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    width: 100px;

    margin-bottom: 32px;
    transition: opacity 0.2s;
}

.hidden {
  opacity: 0;
}

.emoji {
    text-align: center;
    font-size: 24px;
    padding: 8px;
}

.emoji:hover {
    cursor: pointer;
}

<button onclick="toggleEmojiDrawer()">Emojis</button>

<div id="drawer" class="emoji-drawer hidden"> 
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😀</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😃</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😄</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😁</div>
  <div class="emoji" onclick="addEmoji(this.innerHTML)">😆</div>
</div>

<input id="input" placeholder="Text goes here">