js 实现游标_

使用 JavaScript 实现游标

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

获取当前游标位置

const inputElement = document.getElementById('myInput');
const cursorPosition = inputElement.selectionStart;
console.log(cursorPosition); // 输出当前游标位置

设置游标位置

const inputElement = document.getElementById('myInput');
inputElement.selectionStart = 5;
inputElement.selectionEnd = 5;
inputElement.focus(); // 确保元素获得焦点

选中文本范围

const inputElement = document.getElementById('myInput');
inputElement.selectionStart = 2;
inputElement.selectionEnd = 5;
inputElement.focus();

在文本框中插入文本并移动游标

const inputElement = document.getElementById('myInput');
const cursorPos = inputElement.selectionStart;
const textBefore = inputElement.value.substring(0, cursorPos);
const textAfter = inputElement.value.substring(cursorPos);
inputElement.value = textBefore + '新文本' + textAfter;
inputElement.selectionStart = cursorPos + '新文本'.length;
inputElement.selectionEnd = cursorPos + '新文本'.length;
inputElement.focus();

处理多行文本框的游标

对于 textarea 元素，可以使用相同的方法：

const textareaElement = document.getElementById('myTextarea');
textareaElement.selectionStart = 10;
textareaElement.selectionEnd = 10;
textareaElement.focus();

使用 setSelectionRange 方法

某些情况下，可以使用 setSelectionRange 方法更简洁地设置游标位置：

const inputElement = document.getElementById('myInput');
inputElement.setSelectionRange(3, 3);
inputElement.focus();

这些方法适用于大多数现代浏览器，可以满足基本的游标控制需求。