修复 contenteditable div 上的插入符位置

Question

我有一个带有 contenteditable="true" 和 resize: both 属性的 div，它通过 flexbox

使文本居中

.edit-area {      
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(206, 206, 206, 0.5);
      border: 0.1rem solid gray;
      resize: both;
      overflow: hidden;
}

问题是，当您聚焦 div 并且它是空的时，插入符号位置在左上角

只有当您键入 1 个字符时，插入符号才会跳到中间

我做了一些研究并找到了如下答案：
Caret position when centering with flexbox in contenteditable
Centering the placeholder caret in contentEditable element

text-align:center on :empty 选择器适用于水平居中，但是对于垂直对齐问题仍然存在，在 :empty 选择器上使用 line-height = initial height 修复在我的情况下不起作用，因为这个 div 可以调整大小，有没有办法以编程方式在中心设置插入符使用 onFocus 事件，或其他一些 css 技巧？

在@Spectric 的帮助下，这里的答案是我最终得到的解决方案：

const FILLCHARACTER = String.fromCharCode(8203);

node
  .on("input", textInputHandler)
  .on("keydown", textKeyDownHandler);

  const textInputHandler = () => {
    const nodeDOM = d3.select(textNode.current).node();
    if (nodeDOM.innerText.toString().length == 0) {
      nodeDOM.innerHTML = FILLCHARACTER;
    }
  };

  const textKeyDownHandler = (event) => {
    if (event.key == "Backspace") {
      const selectionText = window.getSelection().toString();
      const selectionLength = selectionText.length;
      const currentTextLength = textValue.current.length;
      if (
        selectionLength === currentTextLength ||
        (selectionLength === 1 &&
          (/\u200B/g.test(selectionText) ||
            selectionText.indexOf(FILLCHARACTER) !== -1))
      ) {
        d3.select(textNode.current).node().innerHTML = FILLCHARACTER;
      }
    }
  };

Answer 1

使用 JavaScript，您可以在检测到 contenteditable 为空时插入 space（' '）。这会将插入符号位置推到中心。

document.querySelector('.edit-area').addEventListener("input", function() {
  if (this.innerText.toString().length == 0) {
    this.innerHTML= '&nbsp;';
  }
})

.edit-area {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(206, 206, 206, 0.5);
  border: 0.1rem solid gray;
  resize: both;
  overflow: hidden;
}

<div class="edit-area" contenteditable>
&nbsp;
</div>

修复 contenteditable div 上的插入符位置

Fix caret position on contenteditable div

html

javascript

css

dom-events

d3.js