• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS active czy focus

VPS Starter Arubacloud
+1 głos
627 wizyt
pytanie zadane 11 lipca 2021 w HTML i CSS przez Kytrap Początkujący (390 p.)
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.

2 odpowiedzi

+2 głosów
odpowiedź 11 lipca 2021 przez Comandeer Guru (603,580 p.)
edycja 11 lipca 2021 przez Comandeer

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.

komentarz 11 lipca 2021 przez Wiciorny Ekspert (274,410 p.)
a najechanie kursorem myszy ? To będzie active? :), czy tutaj wejdzie w gre samo "hoover" jeśli nie zostanie podjęta akcja click.
1
komentarz 11 lipca 2021 przez Comandeer Guru (603,580 p.)

Nie, najechanie to :hover.

komentarz 11 lipca 2021 przez Wiciorny Ekspert (274,410 p.)
no własnie dodałem, do swojej treści o czymś, o czym sobie przypomniałem :D
0 głosów
odpowiedź 11 lipca 2021 przez VBService Ekspert (255,260 p.)
komentarz 11 lipca 2021 przez Kytrap Początkujący (390 p.)
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
komentarz 11 lipca 2021 przez VBService Ekspert (255,260 p.)
edycja 12 lipca 2021 przez VBService

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

 

[ 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();
  });
}

 

1
komentarz 11 lipca 2021 przez Comandeer Guru (603,580 p.)

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.

komentarz 11 lipca 2021 przez Comandeer Guru (603,580 p.)

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/

komentarz 11 lipca 2021 przez Kytrap Początkujący (390 p.)
czyli wystarczy mi wiedza że Focus jest do oznaczania pola tekstowego, a aktive do przycisków ??
1
komentarz 11 lipca 2021 przez Comandeer Guru (603,580 p.)
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.

Podobne pytania

0 głosów
1 odpowiedź 166 wizyt
0 głosów
1 odpowiedź 212 wizyt

92,775 zapytań

141,702 odpowiedzi

320,553 komentarzy

62,109 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...