Управление HTML DOM с ванильным JavaScript

Авторизоваться

Предположим, что мы хотим иметь заполнитель для данного contenteditable элемента:

<div contenteditable></div>

1. Используйте селектор :empty

Мы используем пользовательский атрибут data-placeholder, чтобы установить заполнитель:

<div class="editable" contenteditable data-placeholder="Edit me"></div>

Атрибут будет показан, когда значение элемента будет пустым:

.editable:empty:before {
    content: attr(data-placeholder);
}

2. Обрабатывать события

Во- первых, мы добавим атрибуты id и data-placeholder элемента следующим образом:

<div contenteditable data-placeholder="Edit me" id="editMe"></div>

Когда пользователи установит фокус на элементе, мы сбросим его содержимое, если оно совпадает с заполнителем. Кроме того, когда элемент теряет фокус, его содержимое будет возвращено в качестве заполнителя, если пользователи ничего не вводят.

const ele = document.getElementById('editMe');

// Get the placeholder attribute
const placeholder = ele.getAttribute('data-placeholder');

// Set the placeholder as initial content if it's empty
(ele.innerHTML === '') && (ele.innerHTML = placeholder);

ele.addEventListener('focus', function(e) {
    const value = e.target.innerHTML;
    value === placeholder && (e.target.innerHTML = '');
});

ele.addEventListener('blur', function(e) {
    const value = e.target.innerHTML;
    value === '' && (e.target.innerHTML = placeholder);
});

Чтобы оставить комментарий, необходимо авторизоваться

Войти на сайт

Как управлять DOM на чистом JavaScript?

1. Используйте селектор :empty

2. Обрабатывать события