Question

我正在尝试实现类似facebook的聊天窗口的输入框，其中空格键文本的点击可以转换为表情符号。使用我的代码，每当转换发生时，插入符号都会返回到div的开头。而且，我想要调用函数convert（），只要div.But中存在文本，一次转换后代码停止工作，我必须单击外部，然后在文本框内部进行转换。我该如何正确实现这些内容？

var data={
  "value":":)",
  "image":"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSaW1KOeceO85Y7KfUXGyLZm1LfTwjhQspKKXUl3D3a5Mo1uz-AhA"
};
$(document).ready(function(){
  convert();
  
  
  
    function getWord(text){
      var word=text.split(" ").pop();
      return word;
    }
  
  
  function setCursor(i){
    i++;
    console.log(i);
     var el = document.getElementById("image");
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStartAfter(el);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
  }
  
  function convert(){
    document.body.onkeyup=function(e){
       var contenteditable = document.querySelector('[contenteditable]');
  text = contenteditable.textContent;
    if(e.keyCode==32){
      var word=getWord(text);
      if(word.includes(data.value)){
        var i=0;
        var img = "<img id='image'"+i+" src='" + data.image +"' class='image' /> ";
        
        console.log(img);
        $("#text-box").html(function (_, html) {
          return html.replace(data.value , img );
        });
          setCursor(i);     
        //$("#text-box").html(text.(replace(data.value,img));
        //document.getElementById('textbox').replaceChild(data.value,img);
       }

  }
    }
  }
    });

<html>
<head>
	<style type="text/css">
		.image{
			position: relative;
			max-height: 1.4em;
			max-width: 1.4em;
		}

		[contenteditable]{
			-webkit-appearance:textfield;
			appearance:textfield;
			border: 1px solid black;
			line-height:1.4em;
			min-height: 20px;
		}
	</style>
</head>
<body>
<div contenteditable="true" id='text-box'>	
</div>


	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script type="text/javascript" src="emoji.js"></script>
	<script type="text/javascript" src="data.json"></script>

</body>
</html>

Answer 1

仅脚本更改。见评论。

var data={
  "value":":)",
  "image":"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSaW1KOeceO85Y7KfUXGyLZm1LfTwjhQspKKXUl3D3a5Mo1uz-AhA"
};
$(document).ready(function(){

  convert();



    function getWord(text){
      var word=text.split(" ").pop();
      return word;
    }


  function setCursor(i){

     var el = document.getElementsByClassName("image")[i]; // Use cannot use more than one Id in HTML. Modify your HTML. Now the selector will be classnames
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStartAfter(el);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);

  }

  function convert(){
    var i = 0; // Set the scope of i correctly. It wasnt incrementing in the code.
    document.body.onkeyup=function(e){
       var contenteditable = document.querySelector('[contenteditable]');
  text = contenteditable.textContent;
    if(e.keyCode==32){
      var word=getWord(text);
      if(word.includes(data.value)){

        var img = "<img id='image'"+i+" src='" + data.image +"' class='image' />";

        console.log(img);

        $("#text-box").html(function (_, html) {
          html = html.replace( /&nbsp;/g,'' ); // Trim extra &nbsp;
          return html.replace(data.value, img );
        });
        setCursor(i); 
        i++;    
        //$("#text-box").html(text.(replace(data.value,img));
        //document.getElementById('textbox').replaceChild(data.value,img);
       }

  }
    }
  }
    });

在contenteditable div中的图像后设置光标

1 个答案: