react如何获取光标
获取光标位置的方法
在React中获取光标位置通常涉及处理输入框或文本区域的onChange或onSelect事件。以下是几种常见的方法：
通过selectionStart和selectionEnd属性
对于<input>或<textarea>元素，可以使用selectionStart和selectionEnd属性获取光标位置。这两个属性分别表示选中文本的起始和结束位置。
import React, { useState } from 'react';
function CursorPositionExample() {
const [position, setPosition] = useState({ start: 0, end: 0 });
const handleSelect = (e) => {
setPosition({
start: e.target.selectionStart,
end: e.target.selectionEnd,
});
};
return (
<div>
<textarea
onSelect={handleSelect}
placeholder="Click or type to see cursor position"
/>
<p>Cursor start: {position.start}, end: {position.end}</p>
</div>
);
}使用document.getSelection()
如果需要获取页面中任意位置的光标（如可编辑的<div>），可以使用document.getSelection()。该方法返回一个Selection对象，包含光标或选中范围的信息。
import React, { useState } from 'react';
function SelectionExample() {
const [selection, setSelection] = useState('');
const handleMouseUp = () => {
const sel = document.getSelection();
setSelection(sel.toString());
};
return (
<div
contentEditable
onMouseUp={handleMouseUp}
style={{ border: '1px solid #ccc', padding: '10px', minHeight: '50px' }}
>
Select some text here.
<p>Selected text: {selection}</p>
</div>
);
}通过ref获取DOM节点
使用ref直接访问DOM节点可以更灵活地操作光标位置。例如，设置光标位置或获取当前光标状态。
import React, { useRef } from 'react';
function RefExample() {
const inputRef = useRef(null);
const handleClick = () => {
if (inputRef.current) {
inputRef.current.focus();
console.log('Cursor position:', inputRef.current.selectionStart);
}
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>Get Cursor Position</button>
</div>
);
}设置光标位置
如果需要动态设置光标位置，可以使用setSelectionRange方法。
const setCursorPosition = (input, pos) => {
input.setSelectionRange(pos, pos);
};
// 使用示例
setCursorPosition(inputRef.current, 5);注意事项
selectionStart和selectionEnd仅适用于<input>和<textarea>元素。- 对于可编辑的
<div>，需结合document.getSelection()或Range对象处理。 - 光标操作通常在事件回调（如
onClick、onSelect）中执行，避免直接操作DOM。
