顯示輸入框時游標自動定位到輸入框內容的最後
阿新 • • 發佈：2018-11-21
思路就是利用input元素中的setSelectionRange方法
setSelectionRange(posstart,posend)用來選中被focus的輸入框的特定範圍.
開始位置和結束位置設定為內容的總長度，游標就會定位到內容最右邊。
<body> <input id="textarea-1" onfocus="setCss(this)" type="text" name="" value="這是一個自動讓游標定位到文字框的最後面的一個demo" autofocus > <button class="btn"onclick="setCss()">定位游標</button> </body> <script> function setCss(opt){ var sr=document.getElementById("textarea-1"); var len = sr.value.length; setSelectionRange(sr,len,len); //將游標定位到文字最後 } function setSelectionRange(input, selectionStart, selectionEnd) {if (input.setSelectionRange) { input.focus(); input.setSelectionRange(selectionStart, selectionEnd); } else if (input.createTextRange) { var range = input.createTextRange(); range.collapse(true); range.moveEnd('character', selectionEnd); range.moveStart('character', selectionStart); range.select(); } } </script>
需要注意到是，元素一定要被選中然後才能通過setSelectionRange方法設定選中。
這裡有個這樣的需求，在點選按鈕時游標定位到輸入框最後面同時輸入框到內容顯示到最後面。
先給輸入框設定autofocus自動定位，然後自動呼叫onfocus方法先呼叫一次setCss，讓輸入框聚焦，然後再點選按鈕再呼叫setCss一次，這時輸入框已經聚焦了，setSelectionRange呼叫有效。
在crome上測試，第一次呼叫setSelectionRange，游標移到了輸入框內容最後面，但是內容顯示沒有定位到最後面，需要呼叫第二次才可以。