获取插入符号位置 JavaScript

当需要在输入框或文本区域中获取插入符号/光标的位置时，我们可以使用一些 JavaScript 方法来实现。以下是几种获取插入符号位置的方法。

使用 selectionStart 和 selectionEnd

selectionStart 和 selectionEnd 是 <input>, <textarea> 或 contentEditable 元素的属性，它们表示当前选中文本的起始和结束位置。如果没有选中文本，它们将返回一个相同的值，代表插入符号位置。

const element = document.querySelector('input') || document.querySelector('textarea')
const cursorPosition = element.selectionStart
console.log(cursorPosition)

上面的代码将获取第一个 <input> 或 <textarea> 节点中的插入符号位置，并将其打印在控制台中。

要获取选中文本的范围，将 selectionStart 和 selectionEnd 结合使用。

const element = document.querySelector('input') || document.querySelector('textarea')
const selectionStart = element.selectionStart
const selectionEnd = element.selectionEnd

if (selectionStart !== selectionEnd) {
  const selectedText = element.value.substring(selectionStart, selectionEnd)
  console.log('Selected text:', selectedText)
}

上面的代码将获取第一个 <input> 或 <textarea> 节点中选中文本的范围（如果有）并将其打印在控制台中。

使用 document.getSelection()

document.getSelection() 方法可以返回选中文本的范围，包括起始和结束位置，即使没有选中文本也能够返回插入符号位置。

const range = document.getSelection().getRangeAt(0)
const cursorPosition = range.startOffset
console.log(cursorPosition)

上面的代码将获取 document 中第一个选中文本范围的起始位置，并将其打印在控制台中。

使用 window.getSelection()

类似于 document.getSelection()，window.getSelection() 方法可以返回选中文本的范围或插入符号位置。

const range = window.getSelection().getRangeAt(0)
const cursorPosition = range.startOffset
console.log(cursorPosition)

上面的代码将获取窗口中第一个选中文本范围的起始位置，并将其打印在控制台中。

以上就是获取插入符号位置的几种方法，可以根据不同的需求进行选择和使用。