我想将插入记号设置为JS编辑内容之前最初的位置。
我在网络上进行了大量搜索,但是大多数答案是将插入符号移到div的末尾。
我已经尝试过此问题的第一个答案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>