最近在做一个文档编辑器 例如tab键(缩进2个空格),用户光标定位在文字中间,按下tab以后,光标位置不变, 这个时候就要在失去焦点的时候保存光标位置,tab操作数据渲染完成后,再去设置光标位置
<div class='container' spellcheck="false" autocapitalize="off" contenteditable="true" >我是可编辑的div</div>
1.获取光标位置代码
let rang = window.getSelection().getRangeAt(0);
console.log(rang.endOffset)

2.设置光标到内容的指定位置
let focusOffset = 4;
function setFocusFun(ele){
let sel = window.getSelection(),
rang = document.createRange(),//创建一个rang对象
content = ele.firstChild,
innerLen = ele.innerText.length;
rang.setStart(content,0);
rang.setEnd(content,focusOffset);
rang.collapse(false);//起始位置和终止位置是否相同的布尔值
sel.removeAllRanges();//移除选中区域的range对象
sel.addRange(rang);//给选中区域添加range对象
};
setFocusFun(document.querySelector('container'));