时间戳

首页 > 解决方案 > 有没有一种简单的方法可以防止光标在 div contenteditable 中移动，即使 JavaScript 用于添加文本？

javascript - 有没有一种简单的方法可以防止光标在 div contenteditable 中移动，即使 JavaScript 用于添加文本？

问题描述

我有以下代码：

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 contenteditable 来说是不够的，而且其中许多根本不起作用。
如何确保光标不会自动移动？

标签： javascripthtmlcursor

解决方案

尝试这个。

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

部分取自：https ://stackoverflow.com/a/6249440/2492924

推荐阅读