js获取文本框光标位置、操作光标setSelectionRange，selectionStart，selectionEnd

关键点：

获取antd组件包裹的原生textArea实例：const textarea = expressInputRef.current.resizableTextArea.textArea;

获取光标位置：const { selectionStart, selectionEnd } =textarea;

设置光标位置：expressInputRef.current.resizableTextArea.textArea.setSelectionRange(4,4);

文本框聚焦：expressInputRef.current.focus();

不使用setTimeout，光标会跳到输入框末尾，使用 setTimeout 是为了在浏览器执行渲染后，延迟执行光标位置设置。这确保了在 value 更新后，光标可以正确地重新定位到你设置的位置

 

 

1. 绑定textArea的ref

<TextArea maxLength={31} placeholder="请输入表达式" ref={expressInputRef} />

2.获取实例，获取光标位置、设置光标位置

const addExpress = (symbol) => {
    expressInputRef.current.focus();
    const textarea = expressInputRef.current.resizableTextArea.textArea;
    if (!!textarea && textarea === document.activeElement) {
      const { selectionStart, selectionEnd } = textarea;
      console.log(selectionStart, 'selectionStart');
      // const str = (form.getFieldValue('express') || '').concat(symbol);
      const str =
        (form.getFieldValue('express') || '').substring(0, selectionStart) +
        symbol +
        (form.getFieldValue('express') || '').substring(selectionStart);

      form.setFieldValue('express', str);
      form.validateFields(['express']);

      //不使用setTimeout，光标会跳到输入框末尾，使用 setTimeout 是为了在浏览器执行渲染后，延迟执行光标位置设置。这确保了在 value 更新后，光标可以正确地重新定位到你设置的位置
      setTimeout(() => {
        // 将光标设置到指定的位置（需获取原生的textarea）
        expressInputRef.current.resizableTextArea.textArea.setSelectionRange(
          selectionStart + symbol?.length,
          selectionStart + symbol?.length
        );
      });
    }
  };