Методы JavaScript для установки заполнителя для Contenteditable Div

В JavaScript, если вы хотите установить текст-заполнитель для редактируемого элемента div, вы можете использовать различные методы. Вот несколько подходов:

Использование псевдокласса CSS :empty: вы можете применить стиль CSS к div, когда он пуст, для отображения текста-заполнителя. Вот пример:

«Введите текст здесь»;
цвет: #999;

Использование события input: вы можете прослушивать событие inputв divи проверять, пусто ли оно. Если это так, вы можете задать текст заполнителя динамически. Вот пример:

<div contenteditable="true" oninput="checkEmpty(this)">
  Enter text here
</div>
<script>
  function checkEmpty(element) {
    if (element.textContent.trim() === '') {
      element.textContent = 'Enter text here';
    }
  }
</script>

Использование событий focusи blur: вы можете прослушивать события focusи blur, чтобы добавлять и удалите текст-заполнитель соответственно. Вот пример:

<div contenteditable="true" onfocus="removePlaceholder(this)" onblur="addPlaceholder(this)">
  Enter text here
</div>
<script>
  function removePlaceholder(element) {
    if (element.textContent === 'Enter text here') {
      element.textContent = '';
    }
  }
  function addPlaceholder(element) {
    if (element.textContent.trim() === '') {
      element.textContent = 'Enter text here';
    }
  }
</script>

Это всего лишь несколько примеров. Есть и другие способы добиться того же результата. Не забудьте настроить стиль и поведение в соответствии с вашими конкретными требованиями.