react如何获取光标
获取光标位置的方法
在React中获取光标位置通常涉及监听输入事件或焦点事件，以下是几种常见场景的实现方式：
监听输入框的光标位置
通过onSelect或onChange事件结合selectionStart和selectionEnd属性获取光标位置：
function InputWithCursor() {
const [cursorPos, setCursorPos] = React.useState(0);
const handleSelect = (e) => {
setCursorPos(e.target.selectionStart);
};
return (
<input
type="text"
onSelect={handleSelect}
onChange={handleSelect}
/>
);
}获取可编辑元素的光标位置
对于contentEditable的div，需要通过window.getSelection()API：
function EditableDiv() {
const getCursorPos = () => {
const selection = window.getSelection();
const range = selection.getRangeAt(0);
console.log('Cursor at:', range.startOffset);
};
return (
<div
contentEditable
onKeyUp={getCursorPos}
onClick={getCursorPos}
/>
);
}使用ref保存光标状态
通过ref保存输入元素的引用，可在任意时刻获取光标位置：
function InputWithRef() {
const inputRef = React.useRef(null);
const showCursorPos = () => {
console.log('Current cursor:', inputRef.current.selectionStart);
};
return (
<>
<input ref={inputRef} type="text" />
<button onClick={showCursorPos}>Check Position</button>
</>
);
}处理多行文本的光标
对于textarea元素，需考虑行号计算：
function TextAreaWithLinePos() {
const handleCursorChange = (e) => {
const text = e.target.value;
const pos = e.target.selectionStart;
const lines = text.substr(0, pos).split('\n');
const lineNum = lines.length;
const column = lines[lines.length - 1].length + 1;
console.log(`Line: ${lineNum}, Column: ${column}`);
};
return <textarea onChange={handleCursorChange} />;
}兼容性注意事项
selectionStart/End不支持IE8及以下版本- 对于旧版浏览器需使用
document.selectionAPI - 移动端设备可能需要额外处理触摸事件
以上方法可根据具体需求组合使用，核心逻辑都是通过浏览器提供的Selection API或输入元素的属性来追踪光标状态。
