title: How Facebook changes the Emoji from their symbols while chatting?
body: <p><a href="https://i.stack.imgur.com/iy4j8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iy4j8.png" alt="Initial Text when typing something in Facebook Chat Box"></a></p>
  
  <p><a href="https://i.stack.imgur.com/cU0R0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cU0R0.png" alt="The moment you hit space it converts to this!"></a></p>
  
  <p>First Image - Initial Text when typing something in Facebook Chat Box
  Second Image - The moment you hit space it converts to this!</p>
  
  <p>I have seen in developer console it is not the input box at all, they are using span and all with background-image to do it but how to actually combine it completely, to avoid any clutter whatsoever. I am attaching a link of codepen of what I did when pressing Enter key. But not able to do for the Space Bar. <a href="https://codepen.io/abhilash27/pen/jGbPMO" rel="nofollow noreferrer">Codepen Link</a> Anything you guys can help. Thanks in advance. NOTE :- No external libraries and would prefer Javascript answer.</p>
  
  <pre><code>    var emojiContainer = {
                  ":)" : "https://static.xx.fbcdn.net/images/emoji.php/v9/zeb/2/16/1f642.png",
                  "&lt;3" : "https://static.xx.fbcdn.net/images/emoji.php/v9/zed/2/16/2764.png"
              };
  var chatDetailText = document.getElementById('chatDetailText');
  
  chatDetailText.addEventListener("keypress", function (e) {
                  console.log("Inside keypress event")
                  var textEntered = chatDetailText.value;
  
                  var keyPressed = e.which || e.keyCode;
                  console.log(emojiContainer[this.value])
  
                  if (keyPressed === 13){
  
                      console.log("inside keypress 13")
                  if(emojiContainer[this.value]){
                      console.log("inside value found of enter")
                      var emojiImg = document.createElement("img");
                  emojiImg.src = emojiContainer[this.value];
  
                  document.getElementById('enterPressed').appendChild(emojiImg);
                  document.getElementById('chatDetailText').value = '';   
  
              }else{
                  console.log("value not found of enter")
                  var divChatDetail = document.createElement('div');
                  /*chatDetailSeperator.className = "aClassName";*/ //To add class name for div
                          divChatDetail.innerHTML = this.value;
  
                          document.getElementById('enterPressed').appendChild(divChatDetail);
                          document.getElementById('chatDetailText').value = '';   
              }
            }
              }, false);
  </code></pre>