Apa perbedaan antara: fokus dan: aktif?

Jawaban:

413

:focusdan :activedua negara yang berbeda.

  • :focus mewakili keadaan saat elemen saat ini dipilih untuk menerima input dan
  • :active mewakili keadaan saat elemen saat ini sedang diaktifkan oleh pengguna.

Misalnya katakanlah kita punya <button>. Tidak <button>akan memiliki negara untuk memulai. Itu hanya ada. Jika kita gunakan Tabuntuk memberi "fokus" ke <button>, itu sekarang memasuki :focuskondisinya. Jika Anda mengklik (atau menekan space), Anda kemudian membuat tombol masukkan status ( :active).

Pada catatan itu, ketika Anda mengklik suatu elemen, Anda memberinya fokus, yang juga menumbuhkan ilusi itu :focusdan :activesama. Mereka tidak sama. Ketika diklik tombolnya dalam :focus:activekeadaan.

Sebuah contoh:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

sunting: jsfiddle

Andrew Moore
sumber
2
Perhatikan juga bahwa Anda bisa mendapatkan elemen fokus dengan menggunakan document.activeElementproperti yang membingungkan , meskipun harus dalam percobaan coba karena IE8 dapat melempar pengecualian. Dan ketahuilah bahwa versi browser yang lebih lama dapat memperlakukan: aktif dan: fokus secara berbeda. function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
robocat
6
Saya telah membuat JSFiddle dari contoh Anda di sini: jsfiddle.net/NCwvj Pengujian dalam chrome (v24) Saya perhatikan bahwa mengklik tombol hanya memanggil :activenegara bagian
Zaki Aziz
3
Nit: urutan fokus dan aktif memengaruhi status tombol HTML jika tidak ada: aktif: status fokus - Menempatkan: status aktif setelah: fokus, saya mendapatkan perubahan aktif saat saya menekan tab dan menekan spasi. Jika: fokus adalah yang terakhir, saya tidak pernah melihat status aktif.
Matt Gaunt
@ GauntFace, Peramban apa yang Anda gunakan? Di Chrome, urutan deklarasi focusdan activeAnda tidak penting. Itu hanya penting ketika mereka saling bertentangan misalnya color:reddan color:blue(kemudian yang terakhir menang).
Pacerier
Pertanyaan terkait dan jawabannya, berdasarkan yang ini: stackoverflow.com/a/48597351/5587480 . Dari sudut pandang saya, sangat mudah dimengerti
john cj
59
:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Sumber: CSS Pseudo-class

Rubens Farias
sumber
10
Sementara terkait, ini tidak menjawab pertanyaan
Gregor Weber
6
@ GregorWeber itu mengekspos perbedaan dengan menunjukkan definisi
Kamil Kiełczewski
1
Anda mungkin mengetahui hal ini, tetapi jika Anda menetapkannya dalam urutan itu visitedtautan tidak akan berubah gaya ketika melayang atau mengklik karena "kunjungan" mereka akan menimpa kelas pseudo lainnya. LVHFA adalah urutan yang ingin digunakan kebanyakan orang dalam banyak kasus. Tidak yakin mengapa Anda termasuk lang...
Mentalist
22

Ada empat kasus.

  1. Secara default, aktif dan fokus tidak aktif.
  2. Saat Anda tab untuk menggilir elemen yang dapat difokus , mereka akan masuk :focus(tanpa aktif).
  3. Ketika Anda mengklik pada elemen yang:active tidak bisa fokus , elemen itu masuk (tanpa fokus).
  4. Ketika Anda mengklik pada elemen yang dapat :active:focusfokus, elemen itu masuk (aktif dan fokus secara bersamaan).

Contoh:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Ketika halaman memuat keduanya dalam kasus 1. Ketika Anda menekan tab Anda akan fokus pada div kedua dan melihatnya menunjukkan kasus 2. Ketika Anda mengklik pada div pertama Anda melihat kasus 3. Ketika Anda mengklik div kedua, Anda melihat kasus 4 .


Apakah suatu elemen dapat fokus atau tidak adalah pertanyaan lain . Sebagian besar tidak secara default. Tapi, itu aman untuk mengasumsikan <a>, <input>, <textarea>adalah focusable secara default.

James Lawson
sumber
Terima kasih telah menunjukkan bagaimana elemen dapat memiliki :activetetapi tidak :focus. Itu satu hal yang saya bingung tentang jawaban yang tidak saya jawab.
B-Stewart
7

: fokus adalah ketika suatu elemen dapat menerima input - kursor di kotak input atau tautan yang telah ditabrak.

: active adalah ketika elemen diaktifkan oleh pengguna - waktu antara saat pengguna menekan tombol mouse dan kemudian melepaskannya.

Emily
sumber
2
Hai! Apakah ada kondisi untuk "saat ini diklik"? Katakanlah ada tiga tautan di menu nav, bagaimana Anda membuatnya tetap berwarna ketika saat ini "di" tautan? untuk menunjukkan kepada pengguna di mana dia saat ini. sebagai: aktif hanya berfungsi selama tautan (dalam hal ini) diklik, tetapi perubahan kembali pada pelepasan tombol mouse.
Kizer Yakuza
0

Aktif adalah ketika pengguna mengaktifkan titik itu (Seperti mengklik mouse, jika kita menggunakan tab dari bidang ke bidang tidak ada tanda dari gaya aktif. Mungkin mengklik memerlukan lebih banyak waktu, coba tahan klik pada titik itu), fokus terjadi setelah intinya diaktifkan. Coba ini :

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>
Anggie Aziz
sumber
-3

Fokus hanya dapat diberikan oleh input keyboard, tetapi Elemen dapat diaktifkan oleh keduanya, mouse atau keyboard.

Jika orang akan menggunakan: fokus pada tautan, aturan gaya hanya akan berlaku dengan menekan kapas pada keyboard.

Volker Ackermann
sumber
1
:focustidak berfungsi seperti itu. Textarea yang saya ketikkan saat ini memiliki fokus karena saya mengklik tombol. Itu juga dapat kehilangan dan mengembalikan fokus dengan mengklik dari itu, dan ke dalamnya lagi. Hanya dalam sedetik, saya akan memberikan fokus pada tombol Tambahkan Komentar ke kanan dengan mengkliknya. Semua ini tanpa input keyboard menyebabkan fokus.
Joel Mellon
Jika Anda tidak dapat memiliki fokus pada tautan, itu hanya karena tautan tidak dapat difokuskan kecuali jika Anda meletakkannya di jangkar, atau Anda menambahkan atribut tabindex. Tetapi Anda dapat memfokuskan elemen DOM seperti divs atau input.
Alex
-5

Menggunakan "fokus" akan memberi pengguna keyboard efek yang sama dengan yang didapat pengguna mouse saat mereka mengarahkan mouse. "Aktif" diperlukan untuk mendapatkan efek yang sama di Internet Explorer.

Kenyataannya adalah, kondisi ini tidak berfungsi sebagaimana mestinya bagi semua pengguna. Tidak menggunakan ketiga penyeleksi menciptakan masalah aksesibilitas bagi banyak pengguna keyboard saja yang secara fisik tidak dapat menggunakan mouse. Saya mengundang Anda untuk mengambil tantangan #nomouse (nomouse dot org).

AMG
sumber
1
: hover dan: fokus bukan hal yang sama. : melayang adalah keadaan tertentu dan: fokus adalah keadaan tertentu. Agak membingungkan dan menyesatkan untuk menyamakan mereka.
Garry Polley
1
Saya tidak meragukan keahlian Anda. Saya mencoba menunjukkan bahwa: melayang-layang dan: aktif bukanlah hal yang sama. Dan itu membingungkan bagi orang yang lebih baru ke web dan aksesibilitas ketika itu disederhanakan: hover kira-kira sama dengan: aktif untuk penggunaan keyboard. Saya menghargai jawabannya, tetapi mungkin sedikit lebih dalam akan membantu?
Garry Polley
Tentu saja mereka bukan hal yang sama! Saya tidak mengatakan mereka kira-kira sama. (Silakan baca posting saya lagi.) Saya berbicara tentang perbedaan antara menggunakan mouse dan menggunakan keyboard untuk menyelesaikan tugas yang sama. Saya mengatakan Anda harus menggunakan semuanya untuk memberikan pengalaman yang sama kepada kedua set pengguna. Jika tidak, hanya pengguna keyboard yang secara fisik tidak dapat menggunakan mouse akan mengalami kesulitan dalam melihat di mana mereka menabrak pada halaman. Ini menciptakan masalah aksesibilitas bagi orang-orang ini dalam menjelajahi halaman.
AMG