Question

我有满足的段落，我可以写出自动着色的特定单词。但是当我尝试编辑已经上色的文本时，我的光标位置会向后移动，所以在编辑已经有彩色的文本时如何将光标放在当前位置。

我的HTML代码： -

<p contenteditable="true" id="ide" style="border:1px solid red;" >...</p>

我的js代码： -

<script>
  function setEndOfContenteditable(contentEditableElement)
   {
      var range,selection;
      if(document.createRange)
       {


        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);

       }else if(document.selection){ 


         range = document.body.createTextRange();
         range.moveToElementText(contentEditableElement);
         range.collapse(false);
         range.select();

      }
   }

    $(document).ready(function(){
        $("#ide").bind('keyup',function(){
           var x = $(this).text();
           color(x)
           setEndOfContenteditable(this);
        });
    });

  function color(c){
     var str = c; 
    var res = str.replace(/hello|house|car|happy/gi, function myFunction(x)
      {
      return '<span style="color:red;">'+x+'</span>';});
      document.getElementById("ide").innerHTML = res;
      }

许多尝试此操作的人都可以说这是正确的，但请尝试输入你好或房子或汽车或在满足的段落上快乐，它会自动着色现在返回编辑那个彩色字符串。

演示： - https://jsbin.com/nodome/edit?html,output

Answer 1

所以，你的问题有点误导，你的问题是⟵ →箭头键上的<div id="wrapper">事件或< kbd>选择+全部，在每个keyup函数尝试检测单词并执行keyup之后，所以如果您使用color()事件，则可以避免这种情况。

keypress

但是，如果您想在$("#ide").bind('keypress', function() { var x = $(this).text(); color(x) setEndOfContenteditable(this); });之后执行color()，则需要检测哪个keyup已按下并排除key个键。

<强> JSBin

如何在js中符合条件的段落中编辑文本后，如何将光标移动到任何位置

1 个答案: