Question

这是我正在使用的javascript代码，我想突出显示255之后的字符，并且应该显示在另一个具有diff颜色的div中

$( "#testdiv" ).keyup(function() {
   if($("#testdiv").text().length>255)
   {
   var text = $("#info").text()
   $("#testdiv").text("")
   $("#testdiv").append(text.slice(0,255)+"<div>"+text.slice(255)+"</div>")
   }
});

这是HTML代码，

<div id="testdiv"  contenteditable="true">
</div>

使用此代码我面临的问题是

当我尝试更新255个字符后的文本时，它正在将光标位置更新为文本的开头。
如果div中的字符少于255，我按Enter键，然后每次附加包含<br>标记的div。

Answer 1

＆＃13;

$("#testdiv").on('keyup', function() {
  if ($("#testdiv").text().length > 255) {
    var text = $("#testdiv").text()
    $("#testdiv").text("");
    $("#testdiv").html(text.slice(0, 255) + "<div style='color:red'>" + text.slice(255) + "</div>");

    var preHtml = $("#testdiv").html();
    $("#testdiv").html(preHtml);

    $("#testdiv").focus();
    placeCaretAtEnd(document.getElementById("testdiv"));

  }
});

function placeCaretAtEnd(el) {
  el.focus();
  if (typeof window.getSelection != "undefined" &&
    typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}

＆＃13;

<div id="testdiv" contenteditable="true">sample text
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

＆＃13;

如何更新可竞争的div而不更改光标位置

1 个答案: