JS властивість Document.activeElement

Загальний опис

Властивість Document.activeElement надає доступ до поточного елемента в документі, який має фокус. Це означає, що коли користувач навігує по сторінці за допомогою клавіатури або інтерактивує з елементами форми, як-от текстові поля або кнопки, Document.activeElement дозволяє розробникам визначити, який елемент зараз активний. Ця можливість є надзвичайно корисною для покращення доступності та інтерактивності веб-додатків, дозволяючи створювати більш інтуїтивно зрозумілі та зручні для користувача інтерфейси.

Основне застосування Document.activeElement - це вдосконалення користувацького інтерфейсу та взаємодії з користувачем. Воно може бути використано для різноманітних цілей, включаючи валідацію форм, автоматичне переміщення фокусу, а також для розробки доступних веб-додатків, що відповідають стандартам WAI-ARIA.

Валідація форми на льоту:

Одним з часто використовуваних прикладів Document.activeElement є валідація форми в реальному часі. Розробники можуть використовувати цю властивість для ідентифікації поля, яке зараз активне, і надати негайний зворотний зв'язок користувачеві, якщо введені дані не відповідають очікуваним критеріям:

document.addEventListener('input', function() {
  var activeElement = document.activeElement;
  if (activeElement.tagName === 'INPUT' && activeElement.type === 'text') {
    // Перевірка введених даних і надання зворотного зв'язку
    if (activeElement.value.match(/^[a-zA-Z]+$/)) {
      activeElement.classList.remove('error');
    } else {
      activeElement.classList.add('error');
    }
  }
});

Цей код динамічно перевіряє введені дані в текстових полях, позначаючи поле як помилкове, якщо воно містить не лише літери.

Автоматичне переміщення фокусу:

Document.activeElement також може бути використано для створення плавного переходу фокусу між елементами форми, наприклад, при введенні коду підтвердження або дати:

document.addEventListener('input', function() {
  var activeElement = document.activeElement;
  if (activeElement.tagName === 'INPUT' && activeElement.value.length === activeElement.maxLength) {
    var nextElement = activeElement.nextElementSibling;
    if (nextElement && nextElement.tagName === 'INPUT') {
      nextElement.focus();
    }
  }
});

У цьому прикладі, коли користувач заповнює одне поле вводу до максимальної довжини, фокус автоматично переміщується до наступного поля вводу, що покращує зручність введення даних.

Розробка доступних веб-додатків:

Document.activeElement є важливим інструментом для розробки доступних веб-додатків. Він дозволяє розробникам визначати, який елемент зараз у фокусі, щоб правильно управляти атрибутами ARIA для покращення доступності, особливо для користувачів, які використовують технології допомоги, такі як читачі екрану:

document.addEventListener('focus', function() {
  var activeElement = document.activeElement;
  // Оновлення атрибутів ARIA або стилів для покращення доступності
}, true);

Використовуючи Document.activeElement, розробники можуть забезпечити, що їхні веб-додатки є доступними та зручними для всіх користувачів, адаптуючи інтерфейс в залежності від елемента, який зараз активний.

У підсумку, Document.activeElement є надзвичайно потужним інструментом в арсеналі веб-розробника, який відкриває широкі можливості для покращення користувацького досвіду, доступності та інтерактивності веб-сторінок.

правити

Порада

При розробці форм на веб-сайтах використання document.activeElement може бути корисним для валідації даних в реальному часі. Перевіряючи, чи є поле форми активним, можна надавати відразу зворотний зв'язок користувачеві, підкреслюючи помилки або підтверджуючи правильність введення даних, що підвищує інтерактивність та зручність користування.

автор: Bond правити

Порада

Для реалізації функціоналу "гарячих клавіш" на вашому сайті або в веб-додатку, document.activeElement дозволить визначити, який елемент зараз активний, і відповідно до цього активувати різні функції. Наприклад, якщо активним є текстове поле, натискання певної клавіші може вставити спеціальний символ або виконати іншу дію, специфічну для цього контексту.

автор: Bond правити

Порада

Використовуйте document.activeElement у скриптах, що забезпечують адаптивність веб-сторінки до взаємодії з користувачем, наприклад, при автоматичному фокусуванні на наступному полі форми після заповнення попереднього. Такий підхід не тільки економить час користувача, але й робить інтерфейс інтуїтивно зрозумілим і легким у використанні.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.activeElement

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	2	3	4	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	3.2

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

document.addEventListener('click', function() {
    var activeElement = document.activeElement;
    console.log('Активний елемент:', activeElement.tagName);
});

<!DOCTYPE html>
<html>
<head>
    <title>Автоматичне збільшення текстового поля</title>
    <style>
        textarea {
            width: 300px;
            height: 50px;
            transition: height 0.5s ease;
        }
        textarea:focus {
            height: 100px;
        }
    </style>
</head>
<body>
    <textarea placeholder="Клацніть та почніть писати..."></textarea>
    <script>
        document.addEventListener('focusin', function() {
            var activeElement = document.activeElement;
            if (activeElement.tagName === 'TEXTAREA') {
                activeElement.style.height = '100px';
            }
        });
        document.addEventListener('focusout', function() {
            var activeElement = document.activeElement;
            if (activeElement.tagName === 'TEXTAREA') {
                activeElement.style.height = '50px';
            }
        });
    </script>
</body>
</html>