Заполнитель для contenteditable div с минимальным JS

Question

Я создал тег div с атрибутом contenteditable. Я хочу поместить здесь заполнитель, и я нашел следующий код.

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  /* For Firefox */
}

<div class="test" contenteditable="true" placeholder="test"></div>

В двигателе на основе хрома похоже, что он работает. Но я слышал, что здесь есть ошибка, которая требует JavaScript. Я не мог найти ошибку. Можете ли вы сказать мне, в чем проблема?

Я также не уверен, что content:attr(); является веб-стандартом в css. Это стандартизированное CSS свойство?

Answer 1

Проблема в том, что <br> автоматически вставляется в contenteditable div, когда он пуст. Я думаю, что они добавили <br>, чтобы предотвратить его разрушение. Вот где они обсуждали это: Bugzilla .

Вот пример предотвращения разрушения, который я упомянул. Вы можете видеть, что изначально div имеет 0 высоту. Тем не менее, вы все еще можете сосредоточиться на этом. Попробуйте набрать, а затем стереть все. Браузер автоматически вставляет <br>, чтобы он не возвращался к высоте 0, добавляя <br>, который имеет высоту в одну строку.

div {
  border: 1px solid black;
}

<div contenteditable="true" data-placeholder="Test"></div>

Таким образом, мы можем просто использовать <span>, который не вставляет случайное <br> вместо <div>, чтобы делать то, что вы хотите, как это нужно. Попробуйте набрать, а затем стереть символы. Заполнитель будет там точно так, как вы хотите.

* {
  box-sizing: border-box;
}

span {
  display: block;
  width: 100%;
  border: 1px solid black;
  border-radius: 5px;
  font-family: sans-serif;
  padding: 10px;
  cursor: text;
}

span:empty::before {
  content: attr(data-placeholder);
  display: block;
  height: 100%;
  color: #00000066;
}

<span contenteditable="true" data-placeholder="Test"></span>

Если вам действительно нужно использовать div, вы можете стереть <br> вручную, используя JS:

const editable = document.querySelector('#editable')
editable.addEventListener('keyup', e => {
  if (editable.innerText === '\n') editable.innerHTML = ''
})

* {
  box-sizing: border-box;
}

#editable {
  display: block;
  width: 100%;
  border: 1px solid black;
  border-radius: 5px;
  font-family: sans-serif;
  padding: 10px;
  cursor: text;
}

div:empty::before {
  content: attr(data-placeholder);
  display: block;
  height: 100%;
  color: #00000066;
}

<div id="editable" contenteditable="true" data-placeholder="Test"></div>

Использование функции attr() в CSS с content не является экспериментальным. С другими CSS свойствами, такими как color, он все еще экспериментален. Подробнее читайте на этой странице MDN .

Answer 2

Работает на Firefox тоже. Я думаю, что нашел "ошибку", которая может потребовать предполагаемое Javascript. Попробуйте набрать в div, а затем удалить все это с помощью CTRL + A Backspace; заполнитель не вернется, потому что есть <br>, который браузер автоматически вставил (<p></p> в других браузерах).

Свойство content и attr(...) были стандартными с IE8, поэтому хорошо.