Nói đến focus là nói đến element nào (như input, button, link, checkbox, select) đang nhận input từ bàn phím, hoặc clipboard nếu user gọi paste
Element đang có trạng thái focus sẽ được xác định bằng vòng focus ring, tùy theo mỗi trình duyệt mà cách hiển thị khác nhau.
Mình từng gặp tình huống là lướt web bằng smart tv không có bàn phím và chuột, thao tác hoàn toàn bằng remote, hoặc một số người sử dụng máy tính chủ yếu bằng bàn phím, không thể dùng chuột vì lý do nào đó, không có cái focus ring là mình không biết được mình đang trỏ tới element nào hết
Luôn đảm bảo ứng dụng có thể thao tác bình thường dù không cần chuột, chỉ cần bàn phím
Một số element của HTML như input, button, select, a, textarea được gọi là focusable, nghĩa là mặc định nó đã có tabindex=0 và bạn tab là tới mà không cần viết thêm code gì cả
Những element khác như <p/>, <div/> không focus khi chúng ta ấn tab, không cần phải focus vào những element mà mình không cần tương tác gì với nó
Thử mở trang airline site mockup page và tab thử qua các element, trên trang này đang tắt hết các sự kiện mouse input.
Một tình huống cũng hay xảy ra, là ko biết focus đang nằm đâu, đang tab ngon lành, bỗng dưng mất tiêu focus ring, không thấy xuất hiện nữa, tab thêm vài cái nữa thì nó lại xuất hiện.
Nguyên nhân là có element focusable đang bị ẩn đi, không nằm trên màn hình, mặc dù nó có tồn tại, để xác định được element nào đang focus, có thể dùng javascript document.activeElement
console.log(document.activeElement)Đã thấy công dụng của vòng focus, nếu bạn design không thích vòng focus mặc định của trình duyệt, dễ dàng bỏ đi bằng thuộc tính outline
:hover, :focus {
outline: none; // hoặc 0
}
Bạn hãy cho nó một cách hiển thị khác, để user biết được đang focus vào element nào
:hover, :focus {
background: red;
}Bài viết liên quan
Initializing...