как при замене в textarea через регулярку сохранить позицию курсора?

Question

как при замене в textarea через регулярку сохранить позицию курсора? Сейчас при наборе текста,если встречается 2(два) в тексте она заменяется на 3 и курсор перепрыгивает в конец, если нету 2 то не перепрыгивает. https://codesandbox.io/s/nifty-haze-rb7kp

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [text, setText] = useState("");
  useEffect(() => {
    setText(text.replace("2", "3"));
  }, [text]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <textarea value={text} onChange={e => setText(e.target.value)} />
      <br />
      {text}
    </div>
  );
}

Answer 1

Добавьте переменную position и сохраняйте в неё последнюю позицию каретки при событии onChange (ручном вводе).

После срабатывания useEffect устанавливайте каретку на нужное место(position).

Sandbox.

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

export default function App() {
  const [text, setText] = useState("");
  const [pos, setPos] = useState(0);
  const ref = useRef(null);

  useEffect(() => {
    setText(text.replace("2", "3"));
    ref.current.selectionStart = pos;
    ref.current.selectionEnd = pos;
  }, [text, pos]);

  const handler = e => {
    setPos(e.target.selectionStart);
    setText(e.target.value);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <p>{pos}</p>
      <textarea value={text} onChange={handler} ref={ref} />
      <br />
      {text}
    </div>
  );
}

БЛОГ НА HUSL

как при замене в textarea через регулярку сохранить позицию курсора?

Ответы (1 шт):