Как восстановить позицию каретки в 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 объекты, как описано в этом ответе :

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>

Answer 2

Если вы можете использовать тег Input вместо тега P, этот код подходит:

function myFunction() {
  var text = document.getElementById("myInput");
  text.select();
  text.setSelectionRange(text.value.length, text.value.length)
}

button{
 font-size: 25px;
}

<input type="text" value="hello" id="myInput">
<button onclick="myFunction()">Copy text</button>