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。