紀錄工作經驗、相關知識,解決技術相關問題。

Javascript, React, 工作雜談, 新手 Jamp Holes, 未分類, 網站相關

js 如何控制 input 內光標位置

最近工作剛好又遇到舊系統的串接,其中一項是要對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 光標的簡單操作,光標的處理,通常都是在輸入驗證碼、數字這類情境,至於細節如何操作,就要看各家的需求了,但大體上就是上面的組合,希望能對你有幫助。

發表迴響