设置值后，将光标位置移动到textarea中的开始位置

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