document.hasFocus() — чи активна вкладка в JavaScript

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

Метод hasFocus() є частиною інтерфейсу Document у мові програмування JavaScript і відіграє ключову роль у визначенні, чи має елемент у документі фокус у даному моменті. Цей метод повертає булеве значення (true або false), яке вказує на те, чи знаходиться фокус десь у межах документа. Фокус важливий для інтерактивних веб-сайтів та додатків, адже він керує тим, який елемент сторінки в даний момент активний та готовий до взаємодії з користувачем, наприклад, до введення даних з клавіатури.

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

Ось кілька прикладів застосування методу hasFocus() на практиці:

1. Підкреслення активності елемента. Використання hasFocus() може допомогти визначити, коли елемент (наприклад, поле вводу) має фокус, для того, щоб візуально виділити його, покращуючи тим самим користувацький інтерфейс.

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

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

Розглянемо наступний приклад використання методу hasFocus():

document.addEventListener('click', function() {
    if (document.hasFocus()) {
        console.log('Документ має фокус.');
    } else {
        console.log('Документ не має фокусу.');
    }
});

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

правити

Порада

При розробці інтерактивних веб-додатків використовуйте hasFocus() для адаптації поведінки додатка на основі стану фокусу документа. Наприклад, якщо додаток відтворює аудіо або відео, ви можете автоматично призупинити відтворення, коли користувач втрачає фокус, та відновлювати його після повернення.

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

Порада

Метод hasFocus() може бути використаний для поліпшення доступності веб-сайтів, допомагаючи управлінню фокусом на елементах сторінки. За допомогою цього методу можна визначити, коли фокус потрібно перенести на певні елементи або коли потрібно відобразити додаткові інструкції для користувачів з обмеженими можливостями.

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

Порада

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

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

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

Синтаксис

hasFocus()

Повернення

boolean

Повертає булеве значення: true, якщо активний елемент у документі має фокус, та false, якщо активний елемент фокус не має.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	34	3	7	21	12	5.5

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

Переглядач
	37	34	4	7

Приклади

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

<header>
  <h2 class="title">Метод/властивість: Document: hasFocus() method</h2>
  <p class="description">Перевіряє, чи має документ фокус в даний момент.</p>
</header>
<main>
  <div class="result">
    <button id="checkFocusBtn">Перевірити фокус</button>
    <p id="focusStatus">Статус фокусу: <span id="focusValue">-</span></p>
  </div>
</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);
}

document.getElementById("checkFocusBtn").addEventListener("click", function () {
  var focusStatus = document.hasFocus();
  var focusValue = document.getElementById("focusValue");

  if (focusStatus) {
    focusValue.textContent = "Документ має фокус.";
  } else {
    focusValue.textContent = "Документ не має фокусу.";
  }
});
//# sourceURL=pen.js

// Перевірка, чи документ має фокус
function checkDocumentFocus() {
  if (document.hasFocus()) {
    console.log("Документ має фокус.");
  } else {
    console.log("Документ не має фокусу.");
  }
}

// Викликати функцію для перевірки фокусу
checkDocumentFocus();

<video id="exampleVideo" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='152' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eмедіафайла немає%3C/text%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>

// HTML: <video id="exampleVideo" src="path/to/video.mp4" controls></video>

// JavaScript: Призупинення відео, коли документ не має фокусу
function pauseMediaOnBlur() {
  window.onblur = function() {
    if (!document.hasFocus()) {
      var video = document.getElementById("exampleVideo");
      video.pause();
    }
  };
}

// Викликати функцію для ініціалізації
pauseMediaOnBlur();