Facebook이 채팅하는 동안 Emoji가 기호에서 어떻게 바뀌 었습니까? 페이스 북 채팅 상자에 뭔가 두 번째 이미지를 입력 할 때 초기 텍스트 - -

Question

첫 번째 이미지는 순간 당신은이에 변환 공간을 맞았다!

개발자 콘솔에서 입력 상자가 전혀 보이지 않습니다. 스팬 및 배경 이미지를 모두 사용하여이를 실제로 사용하는 방법이 있지만 완전히 혼란스럽게하는 방법은 없습니다. 나는 Enter 키를 누를 때 내가 한 일의 codepen 링크를 붙이고있다. 그러나 스페이스 바를 위해 할 수 없습니다. Codepen Link 여러분이 도움을 줄 수있는 모든 것. 미리 감사드립니다. 참고 : - 외부 라이브러리가없고 자바 스크립트 답변을 선호합니다.

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

당신은 당신의 codepen 링크 if (keyPressed === 32){에 선 if (keyPressed === 13){을 변경해야합니다. 덧글 게시를 막으려면 if (keypressed === 13)에 다른 기능을 추가하기 만하면됩니다.

Answer 2

div에 대해 HTML5 ContentEditable 속성을 사용할 수 있습니다. 여기 은 그 예입니다. 의 contentEditable 저를 도와 Zeeshan에 나는 그것이 다있어 등 인증서 위치의 관리

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

, 감사를 가져 가라. 즉석의 경우 업데이트하십시오.

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