Comment Facebook change les Emoji de leurs symboles en discutant?

Question

Image Première - Texte initial lorsque vous tapez quelque chose dans Facebook Chat Box Image Second - Le moment vous appuyez sur l'espace, il se transforme en cela!

J'ai vu dans la console de développeur ce n'est pas du tout la boîte d'entrée, ils utilisent span et tous avec background-image pour le faire mais comment le combiner complètement, pour éviter tout encombrement. Je joins un lien de codepen de ce que j'ai fait en appuyant sur la touche Entrée. Mais pas en mesure de le faire pour le Space Bar. Codepen Link Tout ce que vous pouvez aider. Merci d'avance. NOTE: - Pas de bibliothèques externes et préfèrerait une réponse Javascript.

var emojiContainer = { 
       ":)" : "https://static.xx.fbcdn.net/images/emoji.php/v9/zeb/2/16/1f642.png", 
       "<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); 

Answer 1

Vous avez juste besoin de changer la ligne if (keyPressed === 13){-if (keyPressed === 32){ dans votre lien codepen. Et pour empêcher cela d'afficher le commentaire, il vous suffit d'ajouter une autre fonction pour if (keypressed === 13).

Answer 2

Vous pouvez utiliser l'attribut HTML5 ContentEditable pour div. voici juste un exemple. Prenez soin de position cert etc.

var emojiContainer = { 
 
\t \t \t \t ":)" : "https://static.xx.fbcdn.net/images/emoji.php/v9/zeb/2/16/1f642.png", 
 
\t \t \t \t "<3" : "https://static.xx.fbcdn.net/images/emoji.php/v9/zed/2/16/2764.png" 
 
\t \t \t }; 
 
var chatDetailText = document.getElementById('chatDetailText'); 
 

 
chatDetailText.addEventListener("keypress", function (e) { 
 
\t \t \t \t console.log("Inside keypress event") 
 
\t \t \t \t var textEntered = chatDetailText.innerHTML; 
 

 
\t \t \t \t var keyPressed = e.which || e.keyCode; 
 
\t \t \t \t 
 
     console.log(keyPressed) 
 
     
 
\t \t \t \t if (keyPressed === 32){ 
 
\t \t \t \t \t 
 
\t \t \t \t \t var last_word = textEntered.split(" "); 
 
      last_word = last_word[last_word.length-1]; 
 
      console.log(last_word); 
 
\t \t \t  if(emojiContainer[last_word]){ 
 
\t \t \t \t  console.log("inside value found of enter") 
 
\t \t \t  \t var emojiImg = "<img src='"+emojiContainer[last_word]+"' >"; 
 
\t   \t 
 
      textEntered = textEntered.replace(last_word, emojiImg) 
 
      
 
      chatDetailText.innerHTML = textEntered; 
 
\t   \t 
 

 
\t  \t } 
 
\t  } 
 
\t \t \t }, false);

<div id="enterPressed"></div> 
 
\t \t <div contenteditable="true" id="chatDetailText" >edit this</div>

Answer 3

Je l'ai fait, grâce à Zeeshan pour l'aider à me contenteditable. Mettez à jour si vous avez des improvisations.

var emojiContainer = { 
       ":)" : "https://static.xx.fbcdn.net/images/emoji.php/v9/zeb/2/16/1f642.png", 
       "<3" : "https://static.xx.fbcdn.net/images/emoji.php/v9/zed/2/16/2764.png" 
      }; 

var chatDetailText = document.getElementById('chatDetailText'); 

chatDetailText.addEventListener("keydown", function (e) { 
    //to perform the action based on pressing space bar (32) or enter (13). 
    var keydown = e.which || e.keyCode; 

    //to get the pointer location and modify to place to the end if needed 
    var selectionInfo = getSelectionTextInfo(this); 

    //to get the complete text extered by the user. 
    var input = chatDetailText.innerHTML; 

    //to cover the cases in which user enters <3 and gets interpreted as &lt 
    var textEntered = decodeHtml(input); 

    //To split the text entered and to get the location of the emoji for conversion 
    var last_word = textEntered.split(/\s{1}/); 

    //After splitting contains the emoji and now can be accessed. 
    last_word = last_word[last_word.length-1]; 

    //space bar is pressed and the smiley is just inserted 
    if (keydown === 32 && selectionInfo.atEnd){ 
    //if the emoji is available in our database, it'll replace the same using the Facebook url which is currently used. 
    if(emojiContainer[last_word]){ 

     var emojiImg = "<img src='"+emojiContainer[last_word]+"' >"; 

     textEntered = textEntered.replace(last_word, emojiImg); 
     chatDetailText.innerHTML = textEntered; 

     elemIterate = document.getElementById('chatDetailText');//This is the element to move the caret to the end of 
     setEndOfContenteditable(elemIterate); 
    } 
    //Enter key is pressed after typing the emoji 
    }else if (keydown === 13) { 
    // To avoid extra line insertion in div. 
    e.preventDefault(); 
    //if the emoji is available in our database, it'll replace the same using the Facebook url which is currently used. 
    if(emojiContainer[last_word]){ 

     var emojiImg = document.createElement("img"); 
     emojiImg.src = emojiContainer[last_word]; 

     var spanChatElement = document.createElement("span"); 
     var precedingChatContent = textEntered.split(/\s{1}/); 

     precedingChatContent.pop(); //To pop the last smiley found 

     if(precedingChatContent.length !=0){ 
     precedingChatContent = precedingChatContent.join(" "); 
     spanChatElement.innerHTML = precedingChatContent; 
     document.getElementById('enterPressed').appendChild(spanChatElement); 
     } 

     document.getElementById('enterPressed').appendChild(emojiImg); 
     document.getElementById('chatDetailText').innerHTML = ''; 

    }else{ 
     //If no Smiley found, just the plain text it'll automatically display the text in a div 
     var divChatElement = document.createElement('div'); 
     //chatDetailSeperator.className = "aClassName"; To add class name for div 
     divChatElement.innerHTML = textEntered; 

     document.getElementById('enterPressed').appendChild(divChatElement); 
     document.getElementById('chatDetailText').innerHTML = ''; 
    } 
    } 
}, false); 

function decodeHtml(html) { 
    var textAreaElement = document.createElement("textarea"); 
    textAreaElement.innerHTML = html; 
    return textAreaElement.value; 
} 
//To send the pointer to the end of the div. 
function setEndOfContenteditable(contentEditableElement){ 
    var range,selection; 
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ 
    { 
    range = document.createRange();//Create a range (a range is like the selection but invisible) 
    range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range 
    range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
    selection = window.getSelection();//get the selection object (allows you to change selection) 
    selection.removeAllRanges();//remove any selections already made 
    selection.addRange(range);//make the range you have just created the visible selection 
    } 
    else if(document.selection)//IE 8 and lower 
    { 
    range = document.body.createTextRange();//Create a range (a range is like the selection but invisible) 
    range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range 
    range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
    range.select();//Select the range (make it the visible selection 
    } 
} 
//To check if it is at the end. 
function getSelectionTextInfo(contentEditableElement) { 
    var atEnd = false; 
    var selectionRange, testRange; 
    if (window.getSelection) { 
    var windowSelection = window.getSelection(); 
    if (windowSelection.rangeCount) { 
     selectionRange = windowSelection.getRangeAt(0); 
     testRange = selectionRange.cloneRange(); 

     testRange.selectNodeContents(contentEditableElement); 
     testRange.setStart(selectionRange.endContainer, selectionRange.endOffset); 
     atEnd = (testRange.toString() == ""); 
    } 
    }else if (document.selection && document.selection.type != "Control") { 
    selectionRange = document.selection.createRange(); 
    testRange = selectionRange.duplicate(); 

    testRange.moveToElementText(contentEditableElement); 
    testRange.setEndPoint("StartToEnd", selectionRange); 
    atEnd = (testRange.text == ""); 
    } 
    return { atEnd: atEnd }; 
}