HTML | InputElement.setSelectionRange() 方法

简介

setSelectionRange() 方法是 InputElement 接口的一个方法。该方法能够在指定位置设置一个输入框的选中文本范围（即所选文本的开始和结束字符的位置），并选中该范围内的文本。它常常用来配合 Selection 接口和 Range 接口使用，以便进行更复杂的文本操作。

语法

input.setSelectionRange(start, end, [direction]);

• start：数字类型，表示选中文本的开始位置（从 0 开始计数）。
• end：数字类型，表示选中文本的结束位置（从 0 开始计数）。
• direction：字符串类型，表示选中文本的方向，可选值为 "forward" 和 "backward"（默认为 "none"）。

使用示例

基本用法

以下示例代码会创建一个输入框，并在输入框中默认选中前三个字符。

<input id="myInput" type="text" value="Hello, world!">
<script>
const input = document.getElementById("myInput");
input.setSelectionRange(0, 3);
</script>

运行该代码后，输入框中的文本将自动被选中为 "Hel"。

配合 Selection 接口使用

以下示例代码会创建一个按钮，在点击它后将会选中输入框中文本的前五个字符。

<input id="myInput" type="text" value="Hello, world!">
<button onclick="selectFirstFive()">Select first five characters</button>
<script>
function selectFirstFive() {
  const input = document.getElementById("myInput");
  const selection = window.getSelection();
  selection.removeAllRanges();
  const range = document.createRange();
  range.setStart(input, 0);
  range.setEnd(input, 5);
  selection.addRange(range);
}
</script>

当你点击该按钮后，输入框中的文本将会变为选中状态，选中范围为文本的前五个字符。

注意事项

在使用 setSelectionRange() 方法时，需要注意以下事项：

• start 和 end 参数必须是非负整数且小于文本长度。
• 如果 start 参数大于 end 参数，则选中范围的方向为 "backward"。
• 选中范围如果在输入框可见区域之外，将不会自动滚动到可见区域内。因此建议在设置范围之前，先将输入框滚动到合适的位置。