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

Posted 2023-04-18

【中文标题】html 网页中的表情符号选择器

【英文标题】：Emoji selector in html webpage

【发布时间】：2021-04-18 01:05:29

【问题描述】：

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

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

然后，当单击“微笑 emojj”时，我希望它显示一个带有所有表情符号的 div，例如：

【参考方案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">

【讨论】：

有没有办法在点击按钮时弹出表情符号？

是的，检查我的编辑。如果您最终添加更多表情符号并且不希望它占用空间，请考虑制作是一个绝对定位的元素。