HTMLInputElement.setSelectionRange()

The HTMLInputElement.setSelectionRange() 方法可以设置一个 <input> 元素中的文本选中内容的起始位置和结束位置。

在较新的浏览器中,你可以通过一个可选的参数来指定文本被被选中过程中的方向。比如通过点击和拖动从结束位置往起始位置选中一个字符串。

每次调用这个这个方法会更新HTMLInputElement.selectionStart, selectionEnd, 和 selectionDirection 这3条属性。

语法

inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);

参数

selectionStart
被选中的第一个字符的位置。
selectionEnd
被选中的最后一个字符的 下一个 位置。
selectionDirection (可选)
一个指明选择方向的字符串,有"forward","backward"和"none" 3个可选值, 分别表示"从前往后", "从后往前"和"选择方向未知或不重要"。

例子

以下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>JS Bin</title>
<script>
function SelectText () {
        var input = document.getElementById("mytextbox");
            input.focus();
            input.setSelectionRange(2,5);
}
</script>
</head>
<body>
  <p><input type="text" id="mytextbox" size="20" value="Mozilla"/></p>
  <p><button onclick="SelectText()">Select text</button></p>
</body>
</html>

表现效果:

example.png

规范

规范 状态 评论
WHATWG HTML Living Standard
HTMLInputElement.setSelectionRange()
Living Standard No change
HTML5.1
HTMLInputElement.setSelectionRange()
Recommendation No change
HTML5
HTMLInputElement.setSelectionRange()
Recommendation Initial definition

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础支持 1.0 1.0 (1.7 or earlier) 9 8.0 (Yes)
selectionDirection 15[1] 8.0 (8.0)[2] ? ? (Yes)[3]
特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基础支持 ? ? ? ? ?
selectionDirection ? 8.0 (8.0)[2] ? ? ?

[1] Blink引擎在 WebKit bug 60403中添加了对selectionDirection的支持。

请注意, 根据 WHATWG forms spec表单规范 , 从chrome 33版本开始, chrome浏览器只支持获取type为text, search, URL, tel and password的input元素的selectionStart, selectionEnd 和 setSelectionRange 属性, 在其余类型中尝试获取这些属性chrome会提示错误。 举例说明,当尝试对<input type="number"> 做上述操作时, chrome浏览器会提示以下错误信息: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection." 相关链接: question on StackOverflow, whatwg bug, Chromium bug.

[2] Gecko引擎在 bug 674558中添加了对selectionDirection的支持。

[3] Webkit引擎在 WebKit bug 60403中添加了对selectionDirection 的支持。

相关内容

文档标签和贡献者

 此页面的贡献者: linningmii
 最后编辑者: linningmii,