Tại sao phần tử giả: tập trung vào nút khi sử dụng TAB nhưng không nhấp?

Question

Tôi đã xem xét chức năng mặc định của các phần tử biểu mẫu và các trạng thái khác nhau mà chúng có giữa các trình duyệt. Tôi tìm thấy một cái gì đó khá lạ. Điều này đã được thử nghiệm trong các trình duyệt khác nhau và kết quả tương tự. Ảnh chụp màn hình bên dưới là từ Chrome v44.0.2403.155m (Windows 64 bit).

Ok, do đó, vấn đề là với trạng thái lấy nét của các nút. Dưới đây bạn sẽ thấy một biểu mẫu mặc định không có kiểu dáng css. Tôi bấm vào đầu vào đầu tiên và sau đó sử dụng phím Tab để tab xuống các yếu tố hình thức. Trong chrome, bạn sẽ nhận được đường viền màu xanh nhạt được áp dụng cho mọi phần tử bạn tab lên.

Chú ý rằng khi tôi nhấp vào nút chuột không có màu xanh nhạt "tập trung" nhà nước nó chỉ xảy ra khi tôi tab vào nó.

Tôi cho rằng điều này chỉ sử dụng: lấy nét và nếu nút theo kiểu của tôi: lấy nét thì tôi sẽ có thể sao chép hành vi mặc định này. Tab lên một nút nó nổi bật, bấm vào một nút nó không. Có một cái nhìn tại phiên bản này mang phong cách của mẫu ...

Khi tôi bấm vào các đầu vào đầu tiên và tab xuống nó điều tương tự, phác thảo tùy chỉnh của tôi được hiển thị (điều này là tốt). Tuy nhiên, hãy chú ý khi tôi nhấp vào nút, nó đang áp dụng trạng thái: focus cho nó. Điều này không giống như hành vi mặc định. Trong phiên bản không theo kiểu, nhấp chuột không áp dụng trạng thái lấy nét.

CSS duy nhất mà tôi đang sử dụng vào nút là ...

input:focus, button:focus { 
    outline: 2px solid green; 
} 

Đây là một bản demo: http://jsfiddle.net/oy83s4up

Làm thế nào để đảm bảo không có đề cương khi nút được nhấn vào, chỉ khi nó được tab?. Ngoài ra, theo mặc định khi một nút được lấy nét bằng phím tab, ngay cả khi nút được nhấp, đường viền vẫn còn, đây cũng là chức năng tôi muốn sao chép.

Lưu ý: Tôi không tìm kiếm công việc JS xung quanh, Hoạt ảnh đầu tiên là hành vi mặc định trong trình duyệt. Chắc chắn nó có thể sao chép với css chỉ? Nếu không, thì đó là một lỗi.

Answer 1

Câu hỏi thú vị!

Những gì tôi nhận thấy khi kiểm tra nút qua Inspect Element và kích hoạt một :focus, nút nhận được kiểu outline: -webkit-focus-ring-color auto 5px;.

này không tạo ra một phác thảo vào nút mặc dù. (Điều này có thể là do Chrome trên Mac, vì tabbing không tạo ra một phác thảo hoặc)

Khi tôi thêm video này vào nút dưới hình thức theo kiểu thay vì gia tăng outline của bạn, nó không nhận được màu xanh dropshadow bạn nhận được khi tabbing thông qua. Điều này lạ nếu bạn hỏi tôi. Khi tôi google -webkit-focus-ring-color, tôi đến this question on SO.Trong câu trả lời đó, anh viết một cái gì đó về [NSColor keyboardFocusIndicatorColor], mà thực sự nói về tập trung bàn phím (tabbing thông qua các hình thức) và không tập trung chuột.

Khi googling một chút trên focus indicators, tôi hạ cánh trên Wikipedia-page cho Focus (computing), có chứa các mảnh sau của văn bản:

Theo quy ước, phím tab được sử dụng để di chuyển sự tập trung vào tiêu điểm tiếp theo thành phần và shift + tab vào tab trước đó. Khi giao diện đồ họa được giới thiệu lần đầu tiên, nhiều máy tính không có chuột, do đó, thay thế này là cần thiết. Tính năng này giúp người dùng gặp khó khăn khi sử dụng chuột để sử dụng giao diện người dùng.

Điều này cho tôi biết rằng tiêu điểm trên nút chỉ hiển thị bằng nhấn bàn phím, vì ban đầu cần phải hiển thị phần tử nào được tập trung vào, trong khi bây giờ bằng chuột rõ ràng những gì đang được tập trung vào, kể từ khi bạn đang tích cực di chuyển chuột vào nút.

Answer 2

Tôi không biết nếu nó có thể sử dụng chỉ css, nhưng với JS, nó được.

Đường viền màu xanh lá cây không được hiển thị khi được nhấp vào nút, nhưng khi nút được lấy nét bằng tab.

var submit = document.getElementById("submit"); 
 

 
var tabbing = false; 
 

 
window.onkeyup = function (e) { 
 
    if (e.keyCode == 9) { 
 
     tabbing = true; 
 
    } 
 
} 
 

 
submit.onfocus = function (e) { 
 
    if (tabbing) { 
 
     this.classList.add("tabbed"); 
 
    } 
 
}; 
 

 
submit.onblur = function() { 
 
    this.classList.remove("tabbed"); 
 
    tabbing = false; 
 
};

#submit.tabbed:focus { 
 
    outline: 2px solid green; 
 
}

<label>Name:</label> 
 
<input type="text" /> 
 
<br> 
 
<label>Pass:</label> 
 
<input type="password" /> 
 
<br> 
 
<label>Save Password:</label> 
 
<input type="checkbox" /> 
 
<br> 
 
<br> 
 
<button id="submit">Submit</button>