How to add emoji picker to chatbox?

Question

Is it possible to just select/click a emoji from my list and it will appear in the text field right. I tried a lot of things but all seems to do work. Is it possible to code it with pure CSS/HTML and what is the simplest way forward?

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>

I'm not too sure if it is possible without any JavaScript, but if you're willing to use JavaScript putting the emojis all-in individual buttons or divs and then copying the innerHTML would probably do the trick. — MichaelTr7, Sep 29 '20 at 20:22
No, you cannot add the emoji to the textbox with pure CSS/HTML. You'll need to write some JavaScript to capture the appropriate emoji text and put it in the input. I suggest wrapping each emoji in a `span` or some other element and adding click events to those. — Heretic Monkey, Sep 29 '20 at 20:23
ok guys i think i should use js. how would the span suggestion be done? example please as i have very little js skills! thx — Yummi, Sep 29 '20 at 20:30

score 1 · Answer 1 · answered Sep 30 '20 at 09:42

As above comment suggested, below is a JavaScript example base on your code:

    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>

Some reference:

Smiley Emojis For Web - https://www.w3schools.com/charsets/ref_emoji_smileys.asp

Printing emojis with JavaScript and HTML

What's "this" in JavaScript onclick?

How to add emoji picker to chatbox?

1 Answers1