插入符号移动到内容可编辑div的开头

时间:2019-02-26 13:08:18

标签: javascript jquery html

我想将插入记号设置为JS编辑内容之前最初的位置。

我在网络上进行了大量搜索,但是大多数答案是将插入符号移到div的末尾。

  • 编辑1

我已经尝试过此问题的第一个答案How to set caret(cursor) position in contenteditable element (div)? 那就是

var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

此代码可用于创建移动插入符号的功能,但问题是:
 
1。我如何获得当前子节点的位置?  
2。我如何获得当前的插入符号位置?

function setCaretPos(el, childNodePos, Pos) {
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[childNodePos], Pos);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}

   $(".editor").on('keydown keyup paste',function(e){
var offest = $(window.getSelection().anchorNode).is($(this)) ? 0 : window.getSelection().anchorOffset;
var elem = $(this)[0];
var tex = elem.innerText;
elem.innerHTML = tex.replace(/(^|\s)(var|const|let|function)(\s|$)/g, '<span class="kwd">\$1</span>');
setCaret(elem, window.getSelection().anchorNode, offest);
$('#pos')[0].innerText = $(window.getSelection().anchorNode).is($(this)) ? 0 : window.getSelection().anchorOffset;
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="editor" contenteditable></div>
  Position: <span id="pos"></span>
</div>

0 个答案:

没有答案