div的contenteditable为true时 获取光标的位置 指定光标在哪个位置 (ie10似乎不兼容)

6,828 阅读1分钟

最近在做一个文档编辑器 例如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'));

MDN文档地址developer.mozilla.org/zh-CN/docs/…