探索光标操控奥秘：js 获取与设置 input 框中光标位置指南

2024-02-08 05:27:10

缘起：光标操控之必要性

在网页开发和文本编辑过程中，您是否曾遇到需要将光标精准定位到 input 框特定位置的情况？也许您希望在输入框中插入特殊符号，或者需要在文本中添加链接。这时，熟练掌握光标操控技巧就显得尤为重要。

一、获取光标位置：探寻输入框的奥秘

1. selectionStart 与 selectionEnd 属性

JavaScript 提供了两个强大的属性：selectionStart 和 selectionEnd，它们可以帮助我们轻松获取 input 框中光标的位置。这两个属性分别表示光标在 input 框中起始位置和结束位置的索引值。

// 获取光标起始位置
var startPosition = inputElement.selectionStart;

// 获取光标结束位置
var endPosition = inputElement.selectionEnd;

2. 巧用 selection 对象

selection 对象提供了多种属性和方法，可以让我们更加灵活地获取和操作光标位置。

// 获取选中文本
var selectedText = inputElement.selection.toString();

// 获取选中文本的长度
var selectionLength = inputElement.selection.length;

// 获取选中文本的起始位置
var selectionStart = inputElement.selection.start;

// 获取选中文本的结束位置
var selectionEnd = inputElement.selection.end;

二、设置光标位置：精准操控输入框

1. setSelectionRange 方法

setSelectionRange 方法允许我们直接设置光标在 input 框中的位置。

// 将光标定位到起始位置为 5，结束位置为 10 的位置
inputElement.setSelectionRange(5, 10);

2. focus 方法

focus 方法可以将焦点设置到 input 框上，从而方便我们使用键盘进行文本编辑。

// 将焦点设置到 input 框上
inputElement.focus();

3. createRange 方法

createRange 方法可以创建一个范围对象，并将其定位到 input 框中的特定位置。

// 创建一个范围对象
var range = document.createRange();

// 将范围对象定位到起始位置为 5，结束位置为 10 的位置
range.setStart(inputElement, 5);
range.setEnd(inputElement, 10);

// 将光标定位到指定范围
inputElement.setSelectionRange(range.startOffset, range.endOffset);

三、实例探究：光标操控的实际应用

1. 文本插入与替换

我们可以利用光标操控技巧，在 input 框中插入或替换文本。

// 在光标位置插入文本
inputElement.value = inputElement.value.substring(0, inputElement.selectionStart) + "插入的文本" + inputElement.value.substring(inputElement.selectionEnd);

// 替换选中文本
inputElement.value = inputElement.value.substring(0, inputElement.selectionStart) + "替换的文本" + inputElement.value.substring(inputElement.selectionEnd);

2. 格式化文本

我们可以利用光标操控技巧，对 input 框中的文本进行格式化，如加粗、倾斜或下划线。

// 将选中文本加粗
document.execCommand('bold', false, null);

// 将选中文本倾斜
document.execCommand('italic', false, null);

// 将选中文本添加下划线
document.execCommand('underline', false, null);