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

227

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

javascript focus

— OM The Eternity
sumber

3

Apa yang Anda inginkan terjadi ketika Anda 'fokus' itu? Div tidak menerima input, jadi Anda ingin mem-flash perbatasan, atau mem-flash highlight latar belakang dll?

— Michael Shimmins

@Michael, ya saya perlu itu <div> untuk menarik perhatian pengguna ...

— OM The Eternity

1

kemungkinan duplikat elemen HTML mana yang dapat menerima fokus?

— Ciro Santilli 郝海东冠状病六四事件法轮功

1

@MichaelShimmins dan siapa saja, elemen <div> dapat menerima input jika Anda dapat menyetel konten yang dapat disetel ke true. (Alasan mengapa saya bertanya)

— MattOlivos

1

@MichaelShimmins divs dapat menerima input jika meluap dan menampilkan bilah gulir. Ketika a divdengan bilah gulir difokuskan, tombol panah akan menggulir isinya (bukan konten dari elemen lain seperti body).

— Rory O'Kane

101

window.location.hash = '#tries';

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

— Casey Chu
sumber

2

@Casey Chu: Ini berfungsi dengan baik yaitu tetapi tidak di firefox, apakah Anda punya ide?

— Haseeb Akhtar

Itu tidak berfungsi di beberapa versi Chrome ... Namun, solusi @vinoths melakukannya

— Charliemops

1

Ini bekerja tetapi ... dengan Angular Anda akan memiliki masalah !!

— Carlos Verdes

@CarlosVerdes; Apakah ada solusi untuk Angular?

— Mac Vicious

3

tidak menjawab pertanyaan 'fokus', ini seharusnya bukan jawaban yang benar. dalam kasus saya, saya ingin fokus pada div 'contentEditable', dan trik Anda tidak membantu.

— arnaudambro

453

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>

Luaskan cuplikan

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.

— Fenton
sumber

6

@Michael Shimmins, ini memungkinkan elemen menjadi fokus (dengan cara yang tidak standar!) Dengan focus().

— strager

2

@Olical - Saya cukup yakin itulah yang dikatakan di baris terakhir jawaban. Beri tahu saya jika menurut Anda ada masalah yang perlu diedit.

— Fenton

2

Jika tidak jelas, menambahkan tabindexuntuk elemen akan membuat focusable, yang memungkinkan focus()dan blur()metode, dan kemudian Anda dapat memicu fokus seperti ini:document.getElementById('tries').focus();

— pilau

4

Hai @SteveOwen - sepertinya masih berfungsi di Firefox v42. Saya telah menambahkan cuplikan ke jawaban ini sehingga Anda dapat menjalankannya dan menguji.

— Fenton

9

@ SeveOwen menggunakan window.location.hash = ...adalah cara untuk melakukan itu. fokus tidak berarti "membawa ke tampilan", itu hanya berarti secara harfiah menempatkan fokus pada elemen itu.

— Fenton

76

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

— vinoths
sumber

2

Perhatikan bahwa solusi ini tidak akan berfungsi di IE, Opera atau Safari.

— AlecRust

1

Saya baru saja mencoba ini di Chrome 65 dan tidak berhasil. Div overlay bergulir ke tampilan, tetapi fokusnya masih di div latar belakang. Satu-satunya cara pasti yang saya tahu adalah memiliki elemen tabbable (menggunakan tabindexatribut) di overlay div dan menggunakan focus()elemen itu sebagai gantinya.

— thdoan

@ om-the-eternity sudah menyatakan bahwa dia ingin div memanggil perhatian pengguna, jadi yang dia butuhkan bukanlah untuk benar-benar fokus (bahkan ketika bekerja itu tidak benar untuk melakukannya) div, tetapi membawanya ke layar , ini memecahkan itu

— Omar Vazquez

Jika saya melakukan ini di Chrome, terus bergulir kembali ke bidang input yang masih fokus. Terutama jika halaman belum selesai memuat.

— Roger Krueger

37

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.

— Sarath Ak
sumber

1

Wow, terima kasih trik keren. Terima kasih! Saya tidak akan menemukan ini sebaliknya.

— AVProgrammer

Life saver, terima kasih. In Edge a div dapat fokus tetapi tidak di Chrome tanpa trik ini. Jawaban yang diterima bagus, tetapi saya tidak ingin bagian tambahan di url.

— Cal

selamatkan nyawanya. Bekerja baik-baik saja dengan krom dan firefox

— Susampath

14

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

— Azad
sumber

Ini berfungsi untuk saya di Chromium / Chrome 46 hanya dikombinasikan dengan$('#inner').focus();

— TNT

2

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

— Juan Mendes
sumber

1

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>

Luaskan cuplikan

— san jing
sumber

0

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.

— Michael Shimmins
sumber