如何在 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>