最近工作剛好又遇到舊系統的串接，其中一項是要對input 的光標進行控制，這邊隨手紀錄一下input 光標的相關操作，有需要的可以自行取用。
顯示光標
在進入畫面時，在沒有人為點選 input 前，inpu 是不會主動出現光標的，如果你需要進入畫面就顯示光標，你可以這樣做:
<input id="test" value="" />
<script>
document.getElementById("test").focus();
</script>JavaScript 提供了 .focus() 方法，這是一個DOM方法，用於設置某個HTML元素獲得焦點，你可以在進入畫面時，直接對想要顯示光標的 input 執行 .focus()。
取得光標位置
在光標控制上，你會需要先取得光標位置，這時你可以這樣做:
<input id="test" value="" />
<script>
document.getElementById('test').selectionStart
</script>使用 .selectionStart 會回傳光標目前的位置，會是一個數字。
無法取得光標正確位置的情況
這裡需要特別注意，在對光標的控制上，必須先確定 input DOM 已存在，否則你會取不到正確光標位置。
另外，input type 如果是設定 hidden，或者 CSS 有下 display: none;，這兩者都是取不到光標位置的。
控制/指定光標位置
如果你想控制光標的位置，這裡我們會使用 .setSelectionRange() 來進行操作，範例如下:
<input id="test" value="1234567890ABC" />
<script>
function controlCaretPosition(start, end) {
var input = document.getElementById('test')
input.setSelectionRange(start, end)
}
// 取得 value
var a = document.getElementById('test').value
// 設定光標在最後面，EX: 1234567890ABC|
controlCaretPosition( value.length, value.length )
// 設定光標在最前面，EX: |1234567890ABC
controlCaretPosition( 0, 0 )
// 設定光標在第5個字元後面，EX: 12345|67890ABC
controlCaretPosition( 5, 5 )
</script>結論
以上就是 input 光標的簡單操作，光標的處理，通常都是在輸入驗證碼、數字這類情境，至於細節如何操作，就要看各家的需求了，但大體上就是上面的組合，希望能對你有幫助。
發表迴響