如何将表情符号选择器添加到聊天框？答案

【问题标题】：How to add emoji picker to chatbox?如何将表情符号选择器添加到聊天框？
【发布时间】：2025-12-24 01:55:16
【问题描述】：

是否可以从我的列表中选择/单击一个表情符号，它会出现在右侧的文本字段中。我尝试了很多东西，但似乎都奏效了。是否可以使用纯 CSS/HTML 对其进行编码？最简单的方法是什么？

body {
  background-color: #6B6B6B;
  background: url(http://wizzfree.com/pix/bg.jpg) fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: Arial;
  color: darkgrey;
  font-size: 14px;
  line-height: .3;
  letter-spacing: .5px;
  margin: 50px;
}


/*............... emojis ...............*/

.emojis {
  position: absolute;
  padding: 25px 15px 10px 20px;
  border-radius: 20px 0px 20px 20px;
  background-color: rgba(0, 0, 0, .3);
}

.emojis2>img {
  position: absolute;
  left: 100%;
  top: 0;
}

.smiley {
  position: absolute;
  top: 25px;
  left: 430px;
}


/*... input message ...*/

input[type=text] {
  width: 300px;
  height: 50px;
  border: none;
  outline: none;
  padding-left: 37px;
  font-family: Arial;
  color: white;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1.5px;
  background-color: rgba(0, 0, 0, .3);
}

<!-- emojis button -->
<div class="smiley" style="height:42px;display:flex;">
  <a href="emojis.html"><img src="http://wizzfree.com/pix/smiley2.png" width="40"></a>

  <!-- input message -->
  <form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form>
</div>

<!-- emojis picker -->
<div class="emojis" style="letter-spacing:3px;font-size:20px;">
  <div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="30" style="transform:scaleX(-1);"></div>
  <br>????????????????????????????????????????
  <p>
    <br>????????????????????????????????????????
  <p>
    <br>???????????????????? ????????????????????
  <p>
    <br>???????????????????????????? ????????????
</div>

【问题讨论】：

我不太确定是否可以不使用任何 JavaScript，但如果您愿意使用 JavaScript 将表情符号全部放入单个按钮或 div，然后复制 innerHTML 可能会做到把戏。
不，您不能使用纯 CSS/HTML 将表情符号添加到文本框。您需要编写一些 JavaScript 来捕获适当的表情符号文本并将其放入输入中。我建议将每个表情符号包装在 span 或其他一些元素中，并向其中添加点击事件。
好吧，我想我应该使用 js。跨度建议将如何完成？请举个例子，因为我的js技能很少！谢谢

标签： html css overlay emoji

【解决方案1】：

正如上面的评论所建议的，下面是一个基于您的代码的 JavaScript 示例：

    function injectEmojisToList(e) {
        document.getElementById("fname").value = e.innerHTML;
    }

<style>
    body {
        background-color: #6B6B6B;
        background: url(http://wizzfree.com/pix/bg.jpg) fixed;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-family: Arial;
        color: darkgrey;
        font-size: 14px;
        line-height: .3;
        letter-spacing: .5px;
        margin: 50px;
    }

    /*............... emojis ...............*/

    .emojis {
        position: absolute;
        padding: 25px 15px 10px 20px;
        border-radius: 20px 0px 20px 20px;
        background-color: rgba(0, 0, 0, .3);
    }

    .emojis2>img {
        position: absolute;
        left: 100%;
        top: 0;
    }

    .smiley {
        position: absolute;
        top: 25px;
        left: 430px;
    }

    /*... input message ...*/

    input[type=text] {
        width: 300px;
        height: 50px;
        border: none;
        outline: none;
        padding-left: 37px;
        font-family: Arial;
        color: white;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1.5px;
        background-color: rgba(0, 0, 0, .3);
    }
</style>

<body>

    <!-- emojis button -->
    <div class="smiley" style="height:42px;display:flex;"><a href="emojis.html"><img
                src="http://wizzfree.com/pix/smiley2.png" width="40"></a>

        <!-- input message -->
        <form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form>
    </div>

    <!-- emojis list -->
    <div class="emojis" style="font-size:20px;">
        <div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="40" style="transform:scaleX(-1);">
        </div>
        <br>
        <span onclick="injectEmojisToList(this)">?</span>
        <span onclick="injectEmojisToList(this)">?</span>
        <span onclick="injectEmojisToList(this)">?</span>
        <span onclick="injectEmojisToList(this)">?</span>
        <span onclick="injectEmojisToList(this)">?</span>
        <span onclick="injectEmojisToList(this)">?</span>
        <span onclick="injectEmojisToList(this)">?</span>
        <span onclick="injectEmojisToList(this)">?</span>
        <span onclick="injectEmojisToList(this)">?</span>
        <span onclick="injectEmojisToList(this)">?</span>
        <p>
            <br>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
        <p>
            <br>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
        <p>
            <br>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
            <span onclick="injectEmojisToList(this)">?</span>
    </div>
</body>

一些参考：

网络笑脸表情符号 - https://www.w3schools.com/charsets/ref_emoji_smileys.asp

Printing emojis with JavaScript and HTML

What's "this" in JavaScript onclick?

【讨论】：