HTMLInputElement:setSelectionRange() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLInputElement.setSelectionRange 方法用于设定 <input><textarea> 元素中当前选中文本的起始和结束位置。

该元素必须获得焦点才能使调用产生任何效果。

可选地,你可以指定选择应发生的方向。例如,这使你可以指示,选择是由用户从选定文本的末尾向开头处点击并拖动设置的。

每次调用这个这个方法都会更新 HTMLInputElement.selectionStartHTMLInputElement.selectionEndHTMLInputElement.selectionDirection 属性。

该元素必须是以下输入类型之一:passwordsearchteltexturl。否则,浏览器会抛出 InvalidStateError 异常。

如果你希望全选输入元素中的文本,你可以使用 HTMLInputElement.select() 方法。

语法

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

参数

如果 selectionEnd 小于 selectionStart,则二者都会被看作 selectionEnd

selectionStart

被选中的第一个字符的位置索引,从 0 开始。如果这个值比元素的 value 长度还大,则会被看作 value 最后一个位置的索引。

selectionEnd

被选中的最后一个字符的下一个位置索引,从 0 开始。如果这个值比元素的 value 长度还大,则会被看作 value 最后一个位置的索引。

selectionDirection 可选

一个表示选择方向的字符串,可能的值有:

  • "forward"
  • "backward"
  • "none" 默认值,表示方向未知或不相关。

返回值

无 (undefined)。

异常

InvalidStateError DOMException

如果元素不是以下输入类型之一:passwordsearchteltexturl,则抛出该异常。

示例

在这个示例中,按下按钮以选择文本框中第三、四、五个字符(即“Mozilla”中的“zil”)。

HTML

html
<input type="text" id="text-box" size="20" value="Mozilla" />
<button onclick="selectText()">选择文本</button>

JavaScript

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

结果

规范

Specification
HTML
# dom-textarea/input-setselectionrange-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setSelectionRange

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

相关内容