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	7	≤12.1	12	6

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

Переглядач
	4.4	18	4	7

Приклади

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

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>

<header>
  <h2 class="title">Document.activeElement</h2>
  <p class="description">Повертає елемент, який в даний момент має фокус на документі.</p>
</header>
<main>
  <div class="result" id="activeElementInfo">
    Клацніть або табуйте між елементами нижче, щоб побачити, який елемент активний.
  </div>
  <input type="text" placeholder="Клацніть тут" id="input1">
  <input type="text" placeholder="Або тут" id="input2">
  <button onclick="showActiveElement()">Показати активний елемент</button>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  margin-bottom: 15px;
}

function showActiveElement() {
  var activeElement = document.activeElement;
  var info = 'Активний елемент: ' + activeElement.tagName;

  if (activeElement.id) {
    info += ', ID: ' + activeElement.id;
  }

  if (activeElement.type) {
    info += ', тип: ' + activeElement.type;
  }

  document.getElementById('activeElementInfo').innerText = info;
}

document.addEventListener('click', showActiveElement);
document.addEventListener('keyup', function (event) {
  if (event.key === 'Tab') {
    showActiveElement();
  }
});
//# sourceURL=pen.js