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` може бути корисним для валідації даних в реальному часі. Перевіряючи, чи є поле форми активним, можна надавати відразу зворотний зв'язок користувачеві, підкреслюючи помилки або підтверджуючи правильність введення даних, що підвищує інтерактивність та зручність користування.
Порада:	Для реалізації функціоналу "гарячих клавіш" на вашому сайті або в веб-додатку, `document.activeElement` дозволить визначити, який елемент зараз активний, і відповідно до цього активувати різні функції. Наприклад, якщо активним є текстове поле, натискання певної клавіші може вставити спеціальний символ або виконати іншу дію, специфічну для цього контексту.
Порада:	Використовуйте `document.activeElement` у скриптах, що забезпечують адаптивність веб-сторінки до взаємодії з користувачем, наприклад, при автоматичному фокусуванні на наступному полі форми після заповнення попереднього. Такий підхід не тільки економить час користувача, але й робить інтерфейс інтуїтивно зрозумілим і легким у використанні.

Синтаксис

Document.activeElement

Значення

Return

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/MWxXWXZ">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому простому прикладі ми використовуємо властивість document.activeElement для визначення елемента, який в даний момент є активним (тобто має фокус) на веб-сторінці.

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

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

<!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>

JS довідник

JavaScript

Наповнення JS розділу