有没有一种简单的方法可以防止光标在 div contenteditable 中移动,即使 JavaScript 用于添加文本?
Is there a simple way to prevent the cursor from moving in a div contenteditable at all, even if JavaScript is used to add text?
我有以下代码:
document.getElementById("myDiv").addEventListener("keydown", function (e){
if (e.keyCode == 8) {
this.innerHTML += "⠀".repeat(4);
e.preventDefault();
}
//moves cursor
});
<div id="myDiv" contenteditable="true">Enter text.</div>
我见过类似的问题,但我见过的答案不足以 div 令人满意,而且其中许多根本不起作用。
如何确保光标不会自动移动?
试试这个。
const el = document.getElementById("myDiv");
const sel = window.getSelection();
const offset = sel.getRangeAt(0).startOffset;
el.innerHTML += 'Text needed to be added'; // perform operations here
const nRange = document.createRange();
nRange.setStart(el.childNodes[0], offset);
nRange.collapse(true);
sel.removeAllRanges();
sel.addRange(nRange);
我还没有检查所有浏览器。您必须执行一些额外的步骤才能获得浏览器兼容性,但这是它的要点。
此处演示:https://jsbin.com/xesitepima/edit?html,js,output
部分摘自:
我有以下代码:
document.getElementById("myDiv").addEventListener("keydown", function (e){
if (e.keyCode == 8) {
this.innerHTML += "⠀".repeat(4);
e.preventDefault();
}
//moves cursor
});
<div id="myDiv" contenteditable="true">Enter text.</div>
如何确保光标不会自动移动?
试试这个。
const el = document.getElementById("myDiv");
const sel = window.getSelection();
const offset = sel.getRangeAt(0).startOffset;
el.innerHTML += 'Text needed to be added'; // perform operations here
const nRange = document.createRange();
nRange.setStart(el.childNodes[0], offset);
nRange.collapse(true);
sel.removeAllRanges();
sel.addRange(nRange);
我还没有检查所有浏览器。您必须执行一些额外的步骤才能获得浏览器兼容性,但这是它的要点。
此处演示:https://jsbin.com/xesitepima/edit?html,js,output
部分摘自: