带有 :before 伪元素的可编辑 div 中的光标位置

Question

我有一个可编辑的 div 和:beforecss:after伪元素。

:before在 div 中设置提示其

作用:after类似于占位符

当用户点击一个空div时，光标会放置在“提示”内容之前。

一旦用户开始输入，:after内容就会消失并且光标位于正确的位置。

有没有办法在选择空 div 时将光标定位在内容之后？有趣的是，如果 div 中有任何文本，并且您选择了 div，光标就会移动到末尾（如我所愿）。

任何想法/帮助将不胜感激。

div[data-prompt][contenteditable=true]:before {

  content: attr(data-prompt);

  font-family: 'Open Sans', sans-serif;

  color: black;

}

div[data-placeholder]:empty:after {

  content: attr(data-placeholder);

  color: black;

}

<div contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>

选择空div时的光标位置

另请注意，“提示”的长度并不总是相同。

Answer 1

您可以考虑文本缩进和一些翻译来控制光标位置。仅当 div 为:emptydiv[data-prompt][contenteditable=true]:before {&nbsp; content: attr(data-prompt);&nbsp; font-family: 'Open Sans', sans-serif;&nbsp; color: black;}div[data-placeholder]:empty:after {&nbsp; content: attr(data-placeholder);&nbsp; color: black;&nbsp; /* added */&nbsp; display: inline-block;&nbsp; transform: translateX(-28px);&nbsp; text-indent: 0;&nbsp; /**/}/* added */div[data-placeholder]:empty {&nbsp; text-indent: 38px;}div[data-prompt][contenteditable=true]:empty:before {&nbsp; display: inline-block;&nbsp; transform: translateX(-37px);&nbsp; text-indent: 0;}/**/div[data-prompt][contenteditable=true] {&nbsp; border: 1px solid;}<div contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div>对于更通用的方式，您可以依赖 CSS 变量：div[data-prompt][contenteditable=true]:before {&nbsp; content: attr(data-prompt);&nbsp; font-family: 'Open Sans', sans-serif;&nbsp; color: black;}div[data-placeholder]:empty:after {&nbsp; content: attr(data-placeholder);&nbsp; color: black;&nbsp; /* added */&nbsp; display: inline-block;&nbsp; transform: translateX(calc(10px - var(--d)));&nbsp; text-indent: 0;&nbsp; /**/}/* added */div[data-placeholder]:empty {&nbsp; text-indent: var(--d);}div[data-prompt][contenteditable=true]:empty:before {&nbsp; display: inline-block;&nbsp; transform: translateX(calc(1px - var(--d)));&nbsp; text-indent: 0;}/**/div[data-prompt][contenteditable=true] {&nbsp; border: 1px solid;}<div style="--d:37px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will " data-placeholder="..."></div><div style="--d:64px;" contenteditable='true' id="tbl01_r2c2" data-type="2" data-prompt="I will not " data-placeholder="..."></div>