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

Question

第一张图片 - 在 Facebook 聊天框中输入内容时的初始文本 第二张图片 - 你点击空格的那一刻，它会转换成这个！

我在开发者控制台中看到它根本不是输入框，他们使用 span 和 all with background-image 来完成它，但是如何真正将它完全结合起来，以避免任何混乱。我附上了我在按 Enter 键时所做的代码笔链接。但不能为空格键做。 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

您可以为 div 使用 HTML5 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("keypress", function (e) {
				console.log("Inside keypress event")
				var textEntered = chatDetailText.innerHTML;

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

	      	}
	      }
			}, false);

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

Answer 2

我完成了，感谢 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 };
}

Answer 3

您只需将 codepen 链接中的 if (keyPressed === 13){ 行更改为 if (keyPressed === 32){。要阻止它发布评论，您只需为 if (keypressed === 13) 添加另一个函数。