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)

参数

如果 selectionEnd 小于 selectionStart，则两者都将视为 selectionEnd 的值。

selectionStart

第一个选定字符的 0 基索引。大于元素值的长度的索引将视为指向值的末尾。

selectionEnd

最后一个选定字符之后的字符的 0 基索引。大于元素值的长度的索引将视为指向值的末尾。

selectionDirection 可选

一个字符串，指示应将选择视为执行的方向。可能的值

  • "forward"
  • "backward"
  • "none" 如果方向未知或无关紧要。默认值。

返回值

无 (undefined).

异常

InvalidStateError DOMException

如果元素不是以下输入类型之一，则抛出此异常：password、search、tel、text 或 url。

示例

单击此示例中的按钮，选择文本框中的第三、第四和第五个字符（单词“Mozilla”中的“zil”）。

HTML

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

JavaScript

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

结果

规范

规范
HTML 标准
# dom-textarea/input-setselectionrange-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

参见