setSelectionRange可用于输入字段，但是如何将光标放置在contenteditable字段的末尾？

Question

我以前曾问过setSelectionRange为什么不起作用，答案是因为它仅适用于输入字段。但是我想尝试使用contenteditable属性来开发电子表格类型的页面。

application.php

window.onkeydown = function(e) {
	if (e.keyCode === 113) {
    setFocus()
	}
}


function setFocus() {
  element = document.getElementById('test')
  element.focus() // works
    .setSelectionRange(3,3) // Doesn't work
}

一旦用户按F2键，如何将光标放在字段的末尾？

Answer 1

这可能是一个很好的解决方案：

window.onkeydown = function(e) {
	if (e.keyCode === 113) {
    setFocus()
	}
}


function setFocus() {
  element = document.getElementById('test')
  element.focus() // works
  setCaretPosition(element,1); // Also works
}

function setCaretPosition(el, pos) {
   
  el.focus();
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(el, pos);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
}

<div id="test" contenteditable>testing</div>
<p>Click in the Result window and then press F2.</p>