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

浏览器兼容性

另见