设置值后将文本区域中的光标位置移动到起始位置

Question

HTML：

<textarea id="text-box" size="20"></textarea>
<button onclick="selectText()">Get Content</button>

JavaScript：

function selectText() {
  var txtArea = document.getElementById('text-box');
  txtArea.value = "Some Text";
  txtArea.focus();
  console.log(txtArea.value.length)

  var sel = window.getSelection();
  var range = sel.getRangeAt(0);

  console.log('range.collapsed',range.collapsed)

  range.collapse(true);
}

上面的代码表明范围已经折叠，并且未选择新设置的内容。光标在内容的末尾。我希望将光标设置为内容的开头。如果我将选择内容设置为整个内容，然后尝试将其折叠，则以下代码将不起作用。

尝试：

function selectText() {
  var txtArea = document.getElementById('text-box');
  txtArea.value = "Some Text";
  txtArea.focus();
  console.log(txtArea.textContent.length)

  txtArea.setSelectionRange(0, txtArea.value.length);

  var sel = window.getSelection();
  console.log(sel.rangeCount)

  sel.collapseToStart();//Doesn't work

  //Also tried the following
  //var range = sel.getRangeAt(0);
  //range.collapse(true);
}

Answer 1

我尝试使用代码sel.collapseToStart()及其正常工作。因此，也许是兼容性问题。您使用什么浏览器？

https://codepen.io/gwtjs/pen/qzrJbp