Как управлять DOM на чистом JavaScript?
Управление DOM с помощью JavaScript в современных браузерах и IE 11+
Предположим, что у нас есть элементы textarea и div для отображения количества символов, которые вводил пользователь:
<textarea id="message"></textarea>
<div id="counter"></div>
Используйте атрибут maxlength
Атрибут maxlength устанавливает максимальное число символов, которые пользователь может поместить в текстовом поле.
<textarea maxlength="200" id="message"></textarea>
Подсчитайте количество символов
Обработайте событие input, которое срабатывает, если значение элемента изменяется:
const messageEle = document.getElementById('message');
const counterEle = document.getElementById('counter');
messageEle.addEventListener('input', function(e) {
const target = e.target;
// Get the `maxlength` attribute
const maxLength = target.getAttribute('maxlength');
// Count the current number of characters
const currentLength = target.value.length;
counterEle.innerHTML = `${currentLength}/${maxLength}`;
});
Хорошо знать
Распространенной ошибкой является захват события keyup. Это не работает в некоторых случаях, таких как:
- Пользователь перетаскивает текст в текстовую область
- Пользователь щелкает правой кнопкой мыши в текстовой области и выбирает Вставить из контекстного меню.
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться