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

发布于06月06日

我以这个简单的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);

可以这样手动设置插入符号位置吗？

推荐答案

在大多数浏览器中，需要Range和Selection个对象.将每个 Select 边界指定为 node ，并在该 node 内指定偏移.例如，要将插入符号设置为第二行文本的第五个字符，请执行以下操作:

function setCaret() {
    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)
}

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

<button id="button" onclick="setCaret()">focus</button>

IE<；9的工作原理完全不同.如果你需要支持这些浏览器，你需要不同的代码.

jsFdle示例:http://jsfiddle.net/timdown/vXnCM/