I have made a live-chat webpage with socket.io found it cool if there could also be an emoji selector button that brings up a list of emojis, just like you can use the "windows key + . period" but instead, just a button that can show a tab like that.

Would I need to use any API's or would there just be a manual feature I could just make, but copy all the emojis available into the tab when the button is clicked. At least, is there anything as the easiest option of making this?

Then when the "smile emojj" is clicked I would like it to make a div appear with all emojis like:

I have made a live-chat webpage with socket.io found it cool if there could also be an emoji selector button that brings up a list of emojis, just like you can use the "windows key + . period" but instead, just a button that can show a tab like that.

Would I need to use any API's or would there just be a manual feature I could just make, but copy all the emojis available into the tab when the button is clicked. At least, is there anything as the easiest option of making this?

Then when the "smile emojj" is clicked I would like it to make a div appear with all emojis like:

• javascript
• html
• css
• socket.io

Share Follow asked Jan 13, 2021 at 2:22 CohenCohen 2,41544 gold badges1919 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Here is a very much a bare-bones version, but you could try something like this. I just copy and pasted a couple of emojis from here into the HTML and then used a bit of JS to add them to the end of the input. If you wanted to get more advanced you could try making it not lose focus when you click an emoji and insert it after the cursor instead of the end of the value.

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)">

                                发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744907855a4600365.html