javascript - 如何在 Javascript 中恢复插入符号位置？

Question

我试图实现当用户按下重置按钮时，光标定位回输入的开头。

谁能指导我如何实现这一目标？

function restore(){
    // here need to set the position
};

p {
  text-align:left;
  padding:10px;
  font-size: 20px;
  font-family: "Open Sans";
  border:1px black solid;
}

button{
 font-size: 25px;
}

<p contenteditable="true"></p>

<button onclick="restore()">Restore</button>

Answer 1

您可以使用 Range 和 Selection 对象，如 this answer 中所述。 :

function restore() {
  var el = document.getElementById("editable");
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(el, 0);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
}

p {
  text-align:left;
  padding:10px;
  font-size: 20px;
  font-family: "Open Sans";
  border:1px black solid;
}

button{
 font-size: 25px;
}

<p id="editable" contenteditable="true"></p>

<button onclick="restore()">Restore</button>