CSS active czy focus

Question

Więc tak, oglądałem odcinek CSS 3 #4 i przerabiałem wraz z nim zadanie które w nim było. I pan Mirosław używał tam do efektów input[type=submit]:focus natomiast ja użyłem input[type=submit]:active  i efekt był ten sam, czym się one różnią i czy jest to jakiś błąd w sztuce koderskiej czy też są one zamienne.

Answer 1

Focus jest wtedy, gdy na dany element przetabuje się przy pomocy klawisza Tab na klawiaturze. Na części systemów operacyjnych i przeglądarek dzieje się też tak wtedy, gdy dany przycisk się kliknie.

Natomiast :active to sam moment klikania, czyli wtedy, gdy trzymasz wciśnięty przycisk myszy (lub spację) i kończy się wtedy, gdy puszczasz ten przycisk (lub spację).

Innymi słowy: focus jest stały i oznacza, że interakcja z klawiatury (np. naciśnięcie spacji) wykona akcję na danym przycisku. Natomiast :active oznacza, że ta akcja na tym przycisku jest właśnie wykonywana.

PoC: https://jsfiddle.net/Comandeer/20m3v17g/

Edit: warto tutaj zauważyć, że w przypadku przycisków aktywacja z poziomu klawiatury następuje po naciśnięciu spacji lub Entera, ale już np. w przypadku linków – tylko przy pomocy Entera.

Comments

a najechanie kursorem myszy ? To będzie active? :), czy tutaj wejdzie w gre samo "hoover" jeśli nie zostanie podjęta akcja click.

---

Nie, najechanie to :hover.

---

no własnie dodałem, do swojej treści o czymś, o czym sobie przypomniałem :D

Answer 2

What is the difference between :focus and :active?

Comments

Czyli rozumiem że Focus nadaje się do pól tekstowych takich jak hasło login by odznaczyć że są aktywne ponieważ reaguje na uruchomienie się pola tekstowego, natomiast active nadaje się do przecisków przez to że reaguje tylko na kliknięcie, tyle zrozumiałem z tej angielszczyzny xD

---

Uruchom ten kod (po uruchomieniu używaj klawisza TAB i (lub) klikaj na button-y)  

 

[ edit ]

<button tabindex="1">button1</button>
<button tabindex="3">button2</button>
<button tabindex="2">button3</button>
<button tabindex="4">button4</button>
<pre id="focus">Focus: <span></span></pre>
<pre id="click-active">Active: <span></span></pre>

button {
  display: block;
  margin: 2em 1em;
  width: 40vw;
  height: 10vh;
  font: 400 1.2em/2em monospace;
}
button:active {
  color: green;
  border-color: green;
}
button:focus {
  outline-color: red;
  outline-style: dotted;
  outline-width: 0.5em;
  outline-offset: 0;
  animation: move-focus 1s ease-in-out infinite;
}
pre {
  font: 900 2em/2.2em arial, monospace;
  margin: 0.5em;
}
 
@keyframes move-focus {
  from { outline-offset: 0; }
   50% { outline-offset: 1em; }
    to { outline-offset: 0; }
}

window.onload = () => {
  const msg_focus = document.querySelector('pre#focus span');
  const msg_click_active = document.querySelector('pre#click-active span');

  const buttons = document.querySelectorAll('button');

  buttons.forEach((button) => {
    button.addEventListener('focus', ({target}) => {
      msg_focus.textContent = target.textContent;
    });
    button.addEventListener('mousedown', (e) => {
      if (e.which === 1) {
        msg_click_active.textContent = e.target.textContent;
      } 
    }); 
    button.addEventListener('keydown', (e) => {
      if (e.code === 'Space' || e.code === 'Enter') {
        msg_click_active.textContent = e.target.textContent;
      }       
    });
    button.addEventListener('keyup', () => {
      msg_click_active.textContent = '';
    });    
    button.addEventListener('mouseup', () => {
      msg_click_active.textContent = '';
    });
    button.addEventListener('focusout', () => {
      msg_focus.textContent = '';
    });   
  });

  // ustawiamy fokus na pierwszym button-ie  ;-)
  buttons[0].focus();

  buttons[3].addEventListener('focusout', () => {
    buttons[0].focus();
  });
}

 

---

Ten kod nie oddaje właściwie stanu :active. Po pierwsze, aktywacja może zajść także przy pomocy klawiatury. Po drugie, aktywacja przy pomocy myszy powinna nastąpić tylko przy kliknięciu głównym (zwykle lewym) przyciskiem myszy.

---

Po edicie dalej nie jest w pełni ok, bo Enter też aktywuje przycisk.

Przy okazji: do wykrywania, który przycisk myszy został wykryty o wiele bardziej elegancko jest użyć event.buttons. Natomiast do wykrycia wciśniętego klawisza – event.code.

PoC: https://jsfiddle.net/Comandeer/8nrb2zht/

---

czyli wystarczy mi wiedza że Focus jest do oznaczania pola tekstowego, a aktive do przycisków ??

---

Nie, to jest całkowicie błędne rozumienie.

Focus oznacza, że dany element będzie odbiorcą Twoich naciśnięć klawiszy na klawiaturze. Active to moment aktywacji (kliknięcia, naciśnięcia spacji/entera) sfocusowanego elementu. I nie musi to być przycisk – może to być choćby link.