当前位置：首页 > JavaScript

js 实现游标

2026-02-02 09:31:31JavaScript

使用 JavaScript 实现游标

在 JavaScript 中，可以通过操作 DOM 元素的 selectionStart 和 selectionEnd 属性来实现游标控制。以下是一个基本的实现方法：

const inputElement = document.getElementById('inputField');

// 设置游标位置
function setCursorPosition(position) {
  inputElement.selectionStart = position;
  inputElement.selectionEnd = position;
  inputElement.focus();
}

// 获取当前游标位置
function getCursorPosition() {
  return inputElement.selectionStart;
}

在可编辑元素中实现游标

对于 contentEditable 元素，需要使用 Range 和 Selection API 来控制游标：

js 实现游标

const editableElement = document.getElementById('editableDiv');

function setCursorAtEnd() {
  const range = document.createRange();
  const selection = window.getSelection();

  range.selectNodeContents(editableElement);
  range.collapse(false);

  selection.removeAllRanges();
  selection.addRange(range);
}

保存和恢复游标位置

在需要保存和恢复游标位置的场景下，可以使用以下方法：

js 实现游标

let savedCursorPosition = 0;

function saveCursorPosition() {
  savedCursorPosition = getCursorPosition();
}

function restoreCursorPosition() {
  setCursorPosition(savedCursorPosition);
}

处理多行文本的游标

对于多行文本区域，需要考虑换行符的影响：

function getCursorLineNumber(textarea) {
  const text = textarea.value;
  const cursorPos = textarea.selectionStart;
  return text.substring(0, cursorPos).split('\n').length;
}

移动游标到特定字符位置

可以创建一个函数将游标移动到特定字符的首次出现位置：

function moveCursorToCharacter(char) {
  const text = inputElement.value;
  const position = text.indexOf(char);
  if (position !== -1) {
    setCursorPosition(position);
  }
}

这些方法提供了在 JavaScript 中控制游标的基本功能，可以根据具体需求进行组合和扩展。