css - 如何在文本框中创建表情符号选择器按钮？

Question

如何在文本框中添加表情符号选择器按钮来选择表情符号？我只能使用 css 和核心 JavaScript，我不能使用 jQuery。我需要一个 WhatsApp 之类的表情符号选择器，我可以使用它在文本区域内插入表情符号。在此处输入图像描述

标签： css

Answer 1

如果您不提供您想要实现的目标的图像，就很难知道您所说的WhatsApp（如表情符号选择器）是什么意思。

在任何情况下，表情符号都是常规字符，因此您可以简单地创建将表情符号添加到文本区域的按钮，以防用户的键盘本身不实现表情符号输入。快速示例：

const add = c => document.querySelector('textarea').value+=c;

<div>
  <button onclick="add('')"></button>
  <button onclick="add('')"></button>
  <button onclick="add('')"></button>
  <button onclick="add('☎️')">☎️</button>
</div>

<textarea rows="5" cols="30">
Type text, or click on an emoji to add it
</textarea>