Facebook在聊天时如何从符号中更改表情符号？

Question

第一幅图片 - 初始文本键入Facebook的聊天框的东西 第二次图像时 - 那一刻你打空间，将其转换为这个！

我在开发者控制台看到它根本不是输入框，它们使用span和所有背景图像来完成它，但是如何将它完全地结合起来，以避免任何混乱。我附上我按Enter键时所做的Codepen的链接。但无法为空间吧做。 Codepen Link任何你可以帮助。提前致谢。注： - 没有外部库，并希望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

你只需要行if (keyPressed === 13){更改为if (keyPressed === 32){在codepen链接。并且要停止发布评论，您只需要为if (keypressed === 13)添加另一个功能。

Answer 2

您可以使用div的HTML5 ContentEditable属性。 这里只是一个例子。照顾证书位置等

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

我把它做了，这要归功于Zeeshan与CONTENTEDITABLE的帮助我。如果您有任何即兴创作，请更新。

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 }; 
}