contenteditable div修改innerHTML后光标移到开头

div加上contenteditable就变成了可编辑，但是它有个缺点，修改innerHTML后光标移到开头，而且即使操纵光标也大概率出现闪烁情况。于是我优化了光标操作contenteditable div的函数，原理就是在光标自行移动到开头后立即删除光标再重新添加。

/* 修改div的值 */
    changeDivInnerHTML(el, value) {
        // 返回当前选区
        var selection = window.getSelection();
        var range = selection.getRangeAt(0);
        // 存储当前光标开始位置
        var caretPosition = range.startOffset;
        // 修改innerHTML，光标会自行移动到开头
        el.innerHTML = value;
        // 移除当前选区
        selection.removeAllRanges();
        // 在光标移动结束后重新设置
        setTimeout(() => {
            // 设置光标开始位置
            range.setStart(el.firstChild, Math.min(caretPosition - 1, value.length));
            // 添加选区
            selection.addRange(range);
        }, 0);
    }

	const el: any = document.querySelector(".fault_name_list");
	this.changeDivInnerHTML(el, this.relFualtNameValue);

接下来是碎碎念。需求是要限制输入长度。
由于特殊原因需要使用contenteditable，input不考虑。
采用keypress事件，发现坑。
不仅要注意删除键，删除键对应键位足足有4个，安卓苹果电脑三平台
而且手机上的光标移动手势没法处理…于是放弃
找到它的变化事件，@input。
然后在@input里判断长度，>=maxLength则阻止默认事件
电脑上完美，手机呃不起作用，放弃。
最终查询了半天光标操作，发现会位置闪烁，崩溃。
慢慢试出来上面的写法。
还有想吐槽的就是，input的keypress在手机上也不生效！！！！！！抑或是keypress里的阻止默认事件不生效！！！没仔细打印。那input也得写个change事件手动替换值。还好input没有光标问题。