Sự khác biệt giữa: tập trung và: hoạt động là gì?

Sự khác biệt giữa các lớp giả :focusvà :activelà gì?

:focusvà :activelà hai trạng thái khác nhau.

• :focus đại diện cho trạng thái khi phần tử hiện được chọn để nhận đầu vào và
• :active đại diện cho trạng thái khi phần tử hiện đang được kích hoạt bởi người dùng.

Ví dụ, giả sử chúng ta có một <button>. Các <button>sẽ không có bất cứ tiểu bang để bắt đầu với. Nó chỉ tồn tại. Nếu chúng ta sử dụng Tabđể "tập trung" vào <button>, thì bây giờ nó sẽ chuyển sang :focustrạng thái. Nếu sau đó bạn nhấp (hoặc nhấn space), sau đó bạn thực hiện nút nhập :activetrạng thái ( ) của nó .

Trên lưu ý đó, khi bạn nhấp vào một yếu tố, bạn sẽ tập trung vào nó, nó cũng nuôi dưỡng ảo ảnh đó :focusvà :activegiống nhau. Chúng không giống nhau. Khi nhấp vào nút ở :focus:activetrạng thái.

Một ví dụ:

<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>

chỉnh sửa: jsfiddle

: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

Nguồn: Các lớp giả CSS

Có bốn trường hợp.

1. Theo mặc định, hoạt động và tập trung đều tắt.
2. Khi bạn tab để chu kỳ thông qua các yếu tố có thể đặt tiêu , họ sẽ nhập :focus(không hoạt động).
3. Khi bạn nhấp vào một yếu tố:active không thể tập trung , nó sẽ đi vào (không có tiêu điểm).
4. Khi bạn nhấp vào một yếu tố có thể :active:focustập trung, nó sẽ nhập (hoạt động và tập trung đồng thời).

Thí dụ:

<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;
}

Khi trang tải cả hai trong trường hợp 1. Khi bạn nhấn tab, bạn sẽ tập trung div thứ hai và thấy nó hiển thị trường hợp 2. Khi bạn nhấp vào div đầu tiên bạn thấy trường hợp 3. Khi bạn nhấp vào div thứ hai, bạn sẽ thấy trường hợp 4 .

Cho dù một yếu tố có thể tập trung hay không là một câu hỏi khác . Hầu hết không theo mặc định. Tuy nhiên, nó là an toàn để giả định <a>, <input>, <textarea>là có thể đặt tiêu theo mặc định.

: tiêu điểm là khi một yếu tố có thể chấp nhận đầu vào - con trỏ trong hộp đầu vào hoặc liên kết đã được gắn thẻ.

: active là khi một phần tử đang được kích hoạt bởi người dùng - khoảng thời gian giữa khi người dùng nhấn nút chuột và sau đó nhả nó.

Hoạt động là khi người dùng kích hoạt điểm đó (Giống như nhấp chuột, nếu chúng tôi sử dụng tab từ trường này sang trường khác, không có dấu hiệu nào từ kiểu hoạt động. Có thể nhấp cần nhiều thời gian hơn, chỉ cần thử giữ nhấp vào điểm đó), việc lấy nét sẽ xảy ra sau điểm được kích hoạt. Thử cái này :

<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"/>

Chỉ có thể lấy nét bằng đầu vào bàn phím, nhưng Element có thể được kích hoạt bằng cả hai, chuột hoặc bàn phím.

Nếu ai đó sẽ sử dụng: tập trung vào một liên kết, quy tắc kiểu sẽ chỉ áp dụng với việc nhấn một nút trên bàn phím.

Sử dụng "tiêu điểm" sẽ mang lại cho người dùng bàn phím hiệu ứng tương tự như người dùng chuột có được khi họ di chuột bằng chuột. "Hoạt động" là cần thiết để có được hiệu ứng tương tự trong Internet Explorer.

Thực tế là, các trạng thái này không hoạt động như bình thường đối với tất cả người dùng. Không sử dụng cả ba bộ chọn sẽ tạo ra các vấn đề về khả năng truy cập cho nhiều người dùng chỉ sử dụng bàn phím, những người không thể sử dụng chuột. Tôi mời bạn tham gia thử thách #nomouse (nomouse dot org).