Apakah mungkin untuk fokus pada fungsi <div> menggunakan fungsi JavaScript fokus?

Apakah mungkin untuk fokus pada fungsi <div>menggunakan JavaScript focus()?

Saya punya <div>tag

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

Saya mencoba fokus pada hal di atas <div>menggunakan:

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

Tapi itu tidak berhasil. Bisakah seseorang menyarankan sesuatu ....?

window.location.hash = '#tries';

Ini akan menggulir ke elemen yang dipermasalahkan, pada dasarnya "memfokuskan" itu.

Ya - ini mungkin. Untuk melakukannya, Anda perlu menetapkan tabindex ...

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

Tabindex 0 akan menempatkan tag "pada urutan tab alami halaman". Angka yang lebih tinggi akan memberinya urutan prioritas tertentu, di mana 1 akan menjadi yang pertama, 2 detik dan seterusnya.

Anda juga bisa memberikan tabindex -1, yang akan membuat div hanya bisa fokus dengan skrip, bukan pengguna.

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>

Jelas, memalukan memiliki elemen yang dapat Anda fokuskan dengan skrip yang tidak dapat Anda fokuskan dengan metode input lainnya (terutama jika pengguna hanya menggunakan keyboard atau memiliki kendala serupa). Ada juga sejumlah elemen standar yang ada difokus secara default dan memiliki informasi semantik yang dibuat untuk membantu pengguna. Gunakan pengetahuan ini dengan bijak.

document.getElementById('tries').scrollIntoView()bekerja. Ini berfungsi lebih baik daripada window.location.hash ketika Anda telah memperbaiki posisi.

Anda dapat menggunakan tabindex

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

Nilai tabindex dapat memungkinkan untuk beberapa perilaku yang menarik.

• Jika diberi nilai "-1", elemen tidak dapat ditabrak tetapi fokus dapat diberikan ke elemen secara terprogram (menggunakan element.focus ()).
• Jika diberi nilai 0, elemen dapat difokuskan melalui keyboard dan jatuh ke aliran tab pada dokumen. Nilai yang lebih besar dari 0 menciptakan tingkat prioritas dengan 1 sebagai yang paling penting.

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

Saya ingin menyarankan sesuatu seperti milik Michael Shimmin tetapi tanpa hardcoding hal-hal seperti elemen, atau CSS yang diterapkan untuk itu.

Saya hanya menggunakan jQuery untuk menambah / menghapus kelas, jika Anda tidak ingin menggunakan jquery, Anda hanya perlu pengganti untuk 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;
}

Untuk membuat flash perbatasan Anda dapat melakukan ini:

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

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

Ini akan membuat batas merah solid selama 1 detik kemudian menghapusnya lagi.