HTMLInputElement: setSelectionRange() 方法

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

HTMLInputElement.setSelectionRange() 方法用於設定 <input><textarea> 元素中當前文字選區的開始和結束位置。此方法會立即更新選區狀態,但視覺高亮僅在元素獲得焦點時顯示。

您可以選擇性地指定選區的方向。例如,這可以用來指示選區是透過使用者從選中文字的末尾向開頭單擊並拖動來設定的。

此方法在一個呼叫中更新 HTMLInputElement.selectionStartHTMLInputElement.selectionEndHTMLInputElement.selectionDirection 屬性,無論元素是否獲得焦點。視覺選區高亮僅在元素獲得焦點時顯示。

該元素必須是以下輸入型別之一:passwordsearchteltexturl。否則,瀏覽器將丟擲 InvalidStateError 異常。

如果您想選擇輸入元素的所有文字,可以使用 HTMLInputElement.select() 方法。

語法

js
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)

引數

selectionStart

第一個選定字元的 0 基索引。大於元素值長度的索引將被視為指向值末尾。

selectionEnd

最後一個選定字元之後的字元的 0 基索引。大於元素值長度的索引將被視為指向值末尾。如果 selectionEnd 小於 selectionStart,則兩者都將被視為 selectionEnd 的值。

selectionDirection 可選

一個字串,指示選區被認為執行的方向。可能的值為

  • "forward"
  • "backward"
  • "none",如果方向未知或無關緊要。預設值。

返回值

無(undefined)。

異常

InvalidStateError DOMException

如果元素不是以下輸入型別之一,則會丟擲此異常:passwordsearchteltexturl

示例

單擊此示例中的按鈕,以選擇文字框中的第三、第四和第五個字元(“Mozilla”中的“zil”)。

HTML

html
<input type="text" id="text-box" size="20" value="Mozilla" />
<button>Select text</button>

JavaScript

js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setSelectionRange(2, 5);
}

document.querySelector("button").addEventListener("click", selectText);

結果

規範

規範
HTML
# dom-textarea/input-setselectionrange-dev

瀏覽器相容性

另見