小编典典

如何在contenteditable元素(div)中设置插入符(光标)的位置?

javascript

我以这个简单的HTML为例:

<div id="editable" contenteditable="true">
  text text text<br>
  text text text<br>
  text text text<br>
</div>
<button id="button">focus</button>

我想要简单的事情-
单击按钮时,我想将插入符号(光标)放入可编辑div中的特定位置。通过网络搜索,我将这个JS附加到了按钮单击上,但是它不起作用(FF,Chrome):

var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

是否可以像这样手动设置插入符号的位置?


阅读 961

收藏
2020-04-25

共1个答案

小编典典

在大多数浏览器中,您需要RangeSelection对象。您可以将每个选择边界指定为一个节点,并在该节点内指定一个偏移量。例如,要将插入符号设置为文本第二行的第五个字符,请执行以下操作:

var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

IE <9的工作原理完全不同。如果需要支持这些浏览器,则需要其他代码。

2020-04-25