focusin

Событие focusin вызывается, когда элемент получает фокус. У этого события есть фаза всплытия.

focusin можно использовать, например, для подсветки группы полей:

        
          
          const group = document.getElementById('address-group')group.addEventListener('focusin', () => {  group.style.border = '1px solid #41E847'})group.addEventListener('focusout', () => {  group.style.border = 'none'})
          const group = document.getElementById('address-group')

group.addEventListener('focusin', () => {
  group.style.border = '1px solid #41E847'
})

group.addEventListener('focusout', () => {
  group.style.border = 'none'
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Современный способ с addEventListener:

        
          
          element.addEventListener('focusin', (event) => {  console.log('Элемент получил фокус')})
          element.addEventListener('focusin', (event) => {
  console.log('Элемент получил фокус')
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Также можно обработать событие через встроенный обработчик событий, но этот способ считается устаревшим и не поддерживается большинством браузеров.

        
          
          // ⚠️ Может не сработать в Chrome и Firefoxelement.onfocusin = (event) => {  console.log('Элемент получил фокус')}
          // ⚠️ Может не сработать в Chrome и Firefox
element.onfocusin = (event) => {
  console.log('Элемент получил фокус')
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Событие focusin возникает сразу после того, как элемент получил фокус (например, по клику или через клавишу Tab), следуя за событием focus.

Событие срабатывает на тех HTML-элементах, которые имеют атрибут tabindex, либо атрибут contenteditable.

Некоторые HTML-элементы по умолчанию имеют tabindex="0":

• <button>;
• <input>;
• <textarea>;
• <select>;
• <frame>;
• <iframe>;
• <object>;
• <a> или <area> с атрибутом href;
• <summary> в связке с <details>.

Чтобы focusin работал на произвольном элементе (например, на <div>), добавьте ему атрибут tabindex="0" или атрибут contenteditable="true".

tabindex="0" указывает браузеру, что на элементе можно сфокусироваться (а, значит, и потерять фокус).

contenteditable="true" указывает браузеру, что элемент может редактироваться пользователем.

        
          
          <div tabindex="0">  Здесь можно сфокусироваться</div><div contenteditable="true">  Здесь так же можно сфокусироваться</div>
          <div tabindex="0">
  Здесь можно сфокусироваться
</div>

<div contenteditable="true">
  Здесь так же можно сфокусироваться
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В примере ниже одинаковый обработчик события окрашивает границы блока при получении фокуса. Кликните на любой блок:

        
          
          <div class="wrapper">  <div>Блок не может получить фокус:</div>  <div class="block" id="block1"></div></div><div class="wrapper">  <div>Блок может получить фокус (с tabindex):</div>  <div class="block" id="block2" tabindex="0"></div></div><div class="wrapper">  <div>Блок может получить фокус (с contenteditable):</div>  <div class="block" id="block3" contenteditable="true"></div></div>
          <div class="wrapper">
  <div>Блок не может получить фокус:</div>
  <div class="block" id="block1"></div>
</div>
<div class="wrapper">
  <div>Блок может получить фокус (с tabindex):</div>
  <div class="block" id="block2" tabindex="0"></div>
</div>
<div class="wrapper">
  <div>Блок может получить фокус (с contenteditable):</div>
  <div class="block" id="block3" contenteditable="true"></div>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          const block2 = document.getElementById('block2')const block3 = document.getElementById('block3')const block1 = document.getElementById('block1')function focusinHandler(event) {  event.target.classList.add('green')  event.target.innerHTML = '👋 Я получил фокус'}block1.addEventListener('focusin', focusinHandler)block2.addEventListener('focusin', focusinHandler)block3.addEventListener('focusin', focusinHandler)
          const block2 = document.getElementById('block2')
const block3 = document.getElementById('block3')
const block1 = document.getElementById('block1')

function focusinHandler(event) {
  event.target.classList.add('green')
  event.target.innerHTML = '👋 Я получил фокус'
}

block1.addEventListener('focusin', focusinHandler)
block2.addEventListener('focusin', focusinHandler)
block3.addEventListener('focusin', focusinHandler)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать