即使失去焦點，如何保持文檔光標可見

Question

我試圖讓 contentEditable div 繼續顯示不閃爍的光標，即使它沒有聚焦。 我試圖模仿的確切行為是即使您單擊屏幕的另一部分，Google 文檔如何繼續顯示文檔光標。 我正在使用反應。

Answer 1

您可以嘗試將焦點放在BLur 上。 需要進一步改進，因為目前它似乎需要雙擊來改變焦點。 但可能是指向正確方向的指針。

const handleFocus = (e) => {
    selected === e.currentTarget.id && e.target.focus();
  };

const handleSelected = (e) => {
    setSelected(e.currentTarget.id);
  };

<div
    id={1}
    onBlur={handleFocus}
    onClick={handleSelected}
    style={styles.input}
    contentEditable
 >
</div>

代碼沙盒： https ://codesandbox.io/s/busy-jasper-drlccv?file=/src/App.js