Положение курсора в редактируемом элементе div с псевдоэлементом: before

У меня есть редактируемый div с псевдоэлементами :before и :after css.

:before устанавливает приглашение в div
The :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

введите описание изображения здесь

Также обратите внимание, что «подсказка» не всегда будет одинаковой длины.

Всего 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>


Есть идеи?

10000