如何防止 Element.focus() 在 contenteditable div 中更改光标位置？

Question

我不想在任何地方移动光标，但是当我调用函数焦点时，它会将光标移动到开头。我希望将光标保持在原位。我正在使用 Typescript 在 ReactJS 中执行此操作。

const element = document.getElementById('editable-div');
element.focus();   // sets cursor to beginning here
// rest of my code is here

我想调用焦点，因为我需要在 contenteditable div 中附加内容，并且在某些情况下插入内容。但是一旦我执行focus()，它就会将光标移动到错误的位置。我该如何解决这个问题？

Answer 1

在document.createRange 和Window.getSelection 的帮助下，这是可能的

const { useState, useEffect, useRef } = React;

const random = (from, to) => Math.floor(Math.random() * (to - from) + from);
const randomText = () => Array(random(5, 10)).fill(0).map((pr, index) => String.fromCharCode(index + 50)).join('')

const setCaretToTheEnd = (element) => {
  const position = element.textContent.length;
  const [childNode] = element.childNodes;
  const range = document.createRange();
  const selection = window.getSelection();
  range.setStart(childNode, position);
  range.setEnd(childNode, position);
  range.collapse(true);
  selection.removeAllRanges();
  selection.addRange(range);
}

const App = () => {
  const [text, setText] = useState('');
  const inputRef = useRef(null);
  
  useEffect(() => {
    if(inputRef && inputRef.current && text) {
      const element = inputRef.current;
            
      setCaretToTheEnd(element);
      element.focus();
    }
  }, [text]);
  
  useEffect(() => {
    let isUnmounted = false;
    let handle = null;
    
    const changeText = () => {
      setText(randomText());
    
      handle = setTimeout(changeText, 4000);
    }
    
    handle = setTimeout(changeText, 500);
    
    return () => {
      isUnmounted = true;
      clearTimeout(handle);
    }
  }, [])

  const onChange = ({target: {value}}) => setText(value);

  return <div>
    <div ref={inputRef} suppressContentEditableWarning={true} className="contentEditable" onChange={onChange} contentEditable>{text}</div>
  </div>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

.contentEditable {
  padding: 1rem;
  border: 1px solid black;
}

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<div id="root"></div>
<script src="https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js"></script>
<div id="root"></div>