带有 :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 为:empty

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;

  /* added */

  display: inline-block;

  transform: translateX(-28px);

  text-indent: 0;

  /**/

}

/* added */

div[data-placeholder]:empty {

  text-indent: 38px;

}

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

  display: inline-block;

  transform: translateX(-37px);

  text-indent: 0;

}

/**/

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

  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 {

  content: attr(data-prompt);

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

  color: black;

}

div[data-placeholder]:empty:after {

  content: attr(data-placeholder);

  color: black;

  /* added */

  display: inline-block;

  transform: translateX(calc(10px - var(--d)));

  text-indent: 0;

  /**/

}

/* added */

div[data-placeholder]:empty {

  text-indent: var(--d);

}

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

  display: inline-block;

  transform: translateX(calc(1px - var(--d)));

  text-indent: 0;

}

/**/

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

  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>