MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

HTMLInputElement.setSelectionRange()

HTMLInputElement.setSelectionRange 方法可以从一个被 focused 的 <input> 元素中选中特定范围的内容。

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

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

语法

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);   // 选择特定部分
            input.setSelectionRange(0, -1); // 全选

}
</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

规范

规范 状态 评论
HTML Living Standard
HTMLInputElement.setSelectionRange()
Living Standard No change
HTML 5.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 的支持。

相关内容

文档标签和贡献者

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