How to show emojis on my website?

Question

When the user clicks the drop down menu, I want to show emojis. But the problem is the only way I know how to do that is to input an emoji one by one.

My question is how do I show all the emojis? I want to when the user clicks the drop down menu and when they click the emoji, add it to the text area.

home.php:

<textarea id="textf2" rows="3" maxlength="3000" placeholder="Enter text" cols="35">
</textarea>
<button id="bt6" type="submit" name="search">Post status</button>

<div class="dropdown" id="div1">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">

  </div>
</div>

<script>
  /* When the user clicks on the button, 
  toggle between hiding and showing the dropdown content */
  function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
  }

  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
</script>

score 2 · Accepted Answer · edited May 23 '17 at 12:33

Okay, I think this is what you want:

After looking here and tinkering with the code for an hour, I got this:

emojis = document.getElementById("myDropdown").getElementsByTagName("li")

for (var i = 0; i < emojis.length; i++) {
  emojis[i].addEventListener("click", function() {
    var smiley = this.innerHTML;
    ins2pos(smiley, 'textf2');
  });
}

function ins2pos(str, id) {
  var TextArea = document.getElementById(id);
  var val = TextArea.value;
  var before = val.substring(0, TextArea.selectionStart);
  var after = val.substring(TextArea.selectionEnd, val.length);

  TextArea.value = before + str + after;
  setCursor(TextArea, before.length + str.length);

}

function setCursor(elem, pos) {
  if (elem.setSelectionRange) {
    elem.focus();
    elem.setSelectionRange(pos, pos);
  } else if (elem.createTextRange) {
    var range = elem.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.matches('#myDropdown li')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

#myDropdown {
  display: none
}

#myDropdown.show {
  display: block;
}

<textarea id="textf2" rows="3" maxlength="3000" placeholder="Enter text" cols="35">
</textarea>
<button id="bt6" type="submit" name="search">Post status</button>

<div class="dropdown" id="div1">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <ul id="myDropdown" class="dropdown-content">
    <li>&#x1F601</li>
    <li>&#x1F603</li>
    <li>&#x1F605</li>
  </ul>
</div>

JSfiddle and more emojis here

Hope that helps!

Update: To include images, you got to use <div id="textf2" contentEditable="true"></div> instead of the text area and use the code noted here

emojis = document.getElementById("myDropdown").getElementsByTagName("li")

for (var i = 0; i < emojis.length; i++) {
  emojis[i].addEventListener("click", function() {
    var smiley = this.innerHTML;
    pasteHtmlAtCaret(smiley + " ");
  });
}

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.matches('#myDropdown img')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

#myDropdown {
  display: none
}
#myDropdown.show {
  display: block;
}
#text_wrapper {
  margin: 40px;
  border: 1px solid #ccc;
}
#textf2 {
  outline: none;
  margin: 10px;
  min-height: 100px;
}

img {
  width: 50px;
  height: auto;
}

<div id="text_wrapper">
  <div id="textf2" contentEditable="true">
  </div>
</div>
<button id="bt6" type="submit" name="search">Post status</button>

<div class="dropdown" id="div1">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <ul id="myDropdown" class="dropdown-content">
    <li><img src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" /></li>
    <li><img src="http://res.freestockphotos.biz/pictures/15/15550-illustration-of-a-yellow-smiley-face-pv.png" /></li>
    <li><img src="http://res.freestockphotos.biz/pictures/15/15564-illustration-of-a-yellow-smiley-face-pv.png" /></li>
  </ul>
</div>

This works . But how do i show it as the emoji pictures I already have ? Do i have to use `` ? — , Jan 06 '17 at 00:30

renlo · Answer 2 · 2017-01-05T23:42:33.677

0

EDIT: I misread the question, so I'll add in how I would do it:

I would create an array of Emoji characters. I would then loop over this array of emojis. For each emoji in the array you want to perform a 'map' operation so you get an HTML element. Then you want to append these elements to the dropdown-content element as children.

For example:

var emojis = ['','','']; // put all emojis in here

emojis.map((character) => {
  var a = document.createElement('a');
  a.src='#';
  a.textContent = character;
  a.addEventListener(
    'click',
    function() { /* append character to the textarea. this will probably something simple like 'textareaElement.value += character */}
  );
  return a;
});

emojis.forEach((el) => dropDownContentElement.appendChild(el));

edited Jan 05 '17 at 23:42

answered Jan 05 '17 at 23:28

renlo

21
1
6

Don't I have to insert the images some how ? – Jan 05 '17 at 23:30
I've edited my response, sorry I misread your question. Emojis are characters. In my example you would want to do `var emojis = ['', '', ...]` etc – renlo Jan 05 '17 at 23:39
when I click the drop down menu nothing happens – Jan 05 '17 at 23:42

How to show emojis on my website?

2 Answers2