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 |
浏览器兼容性
加载中…