时间戳

首页 > 解决方案 > 如何将表情符号选择器添加到聊天框？

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

问题描述

是否可以从我的列表中选择/单击一个表情符号，它将出现在右侧的文本字段中。我尝试了很多东西，但似乎都奏效了。是否可以使用纯 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>

标签： htmlcssoverlayemoji

解决方案

正如上面的评论所建议的，下面是一个基于您的代码的 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

使用 JavaScript 和 HTML 打印表情符号

JavaScript onclick 中的“this”是什么？

推荐阅读