Có thể tập trung vào một <div> bằng cách sử dụng hàm JavaScript Focus () không?

Có thể tập trung vào một chức năng <div>sử dụng JavaScript focus()?

Tôi có một <div>thẻ

<div id="tries">You have 3 tries left</div>

Tôi đang cố gắng tập trung vào những điều trên <div>bằng cách sử dụng:

document.getElementById('tries').focus();

Nhưng nó không hoạt động. Ai đó có thể đề nghị một cái gì đó ....?

window.location.hash = '#tries';

Điều này sẽ cuộn đến phần tử trong câu hỏi, về cơ bản là "tập trung" vào nó.

Vâng - điều này là có thể. Để làm điều đó, bạn cần chỉ định một tabindex ...

<div tabindex="0">Hello World</div>

Một tabindex bằng 0 sẽ đặt thẻ "theo thứ tự tab tự nhiên của trang". Một số cao hơn sẽ cung cấp cho nó một thứ tự ưu tiên cụ thể, trong đó 1 sẽ là đầu tiên, 2 giây và cứ thế.

Bạn cũng có thể đưa ra một tabindex là -1, điều này sẽ khiến div chỉ có thể lấy nét theo tập lệnh chứ không phải người dùng.

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

Rõ ràng, thật đáng tiếc khi có một yếu tố bạn có thể tập trung theo tập lệnh mà bạn không thể tập trung bằng phương thức nhập khác (đặc biệt là nếu người dùng chỉ sử dụng bàn phím hoặc bị hạn chế tương tự). Ngoài ra còn có một loạt các yếu tố tiêu chuẩn có thể tập trung theo mặc định và có thông tin ngữ nghĩa được đưa vào để hỗ trợ người dùng. Sử dụng kiến ​​thức này một cách khôn ngoan.

document.getElementById('tries').scrollIntoView()làm. Điều này hoạt động tốt hơn so với window.location.hash khi bạn có định vị cố định.

Bạn có thể sử dụng tabindex

<div tabindex="-1"  id="tries"></div>

Giá trị tabindex có thể cho phép một số hành vi thú vị.

• Nếu được cho giá trị là "-1", phần tử không thể được gắn thẻ nhưng có thể lấy tiêu điểm cho phần tử theo chương trình (sử dụng phần tử.f Focus ()).
• Nếu được đưa ra một giá trị 0, phần tử có thể được tập trung thông qua bàn phím và rơi vào dòng chảy của tài liệu. Các giá trị lớn hơn 0 tạo mức ưu tiên với 1 là quan trọng nhất.

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

Tôi muốn đề xuất một cái gì đó giống như của Michael Shimmin nhưng không mã hóa những thứ như phần tử hoặc CSS được áp dụng cho nó.

Tôi chỉ sử dụng jQuery để thêm / xóa lớp, nếu bạn không muốn sử dụng jquery, bạn chỉ cần một thay thế cho add / removeClass

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

- CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

Để làm cho đường viền flash bạn có thể làm điều này:

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

Điều này sẽ làm cho đường viền rắn màu đỏ trong 1 giây sau đó loại bỏ nó một lần nữa.