HTMLInputElement: setSelectionRange() 方法
HTMLInputElement.setSelectionRange() 方法用於設定 <input> 或 <textarea> 元素中當前文字選區的開始和結束位置。此方法會立即更新選區狀態,但視覺高亮僅在元素獲得焦點時顯示。
您可以選擇性地指定選區的方向。例如,這可以用來指示選區是透過使用者從選中文字的末尾向開頭單擊並拖動來設定的。
此方法在一個呼叫中更新 HTMLInputElement.selectionStart、HTMLInputElement.selectionEnd 和 HTMLInputElement.selectionDirection 屬性,無論元素是否獲得焦點。視覺選區高亮僅在元素獲得焦點時顯示。
該元素必須是以下輸入型別之一:password、search、tel、text 或 url。否則,瀏覽器將丟擲 InvalidStateError 異常。
如果您想選擇輸入元素的所有文字,可以使用 HTMLInputElement.select() 方法。
語法
js
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)
引數
selectionStart-
第一個選定字元的 0 基索引。大於元素值長度的索引將被視為指向值末尾。
selectionEnd-
最後一個選定字元之後的字元的 0 基索引。大於元素值長度的索引將被視為指向值末尾。如果
selectionEnd小於selectionStart,則兩者都將被視為selectionEnd的值。 selectionDirection可選-
一個字串,指示選區被認為執行的方向。可能的值為
"forward""backward""none",如果方向未知或無關緊要。預設值。
返回值
無(undefined)。
異常
InvalidStateErrorDOMException-
如果元素不是以下輸入型別之一,則會丟擲此異常:
password、search、tel、text或url。
示例
單擊此示例中的按鈕,以選擇文字框中的第三、第四和第五個字元(“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 |
瀏覽器相容性
載入中…