jQuery kehilangan fokus acara


253

Saya mencoba menampilkan wadah jika bidang input mendapatkan fokus dan - itulah masalah sebenarnya - sembunyikan wadah jika fokus hilang. Apakah ada acara yang berlawanan untuk fokus jQuery?

Beberapa contoh kode:

<input type="text" value="" name="filter" id="filter"/>

<div id="options">some cool options</div>

<script type="text/javascript">
  $('#options').hide();

  $('#filter').focus(function() {
    $('#options').appear();
  });
</script>

Dan yang ingin saya lakukan adalah sesuatu seperti ini:

$('#filter').focus_lost(function() {
  $('#options').hide();
});

Jawaban:


419

Gunakan acara blur untuk memanggil fungsi Anda ketika elemen kehilangan fokus:

$('#filter').blur(function() {
  $('#options').hide();
});

3
bagaimana jika browser seperti chrome auto mengisi kotak teks, saya tidak berpikir itu akan memicu blur ()
pita

40

Seperti ini:

$(selector).focusout(function () {
    //Your Code
});

10
apa bedanya dari ini blur?
cregox

5
Metode blur digunakan untuk menghapus fokus (yaitu membuat non-saat ini) objek miliknya. Memberi bidang teks blur akan memindahkan kursor ke bidang berikutnya. Memberi jendela blur akan memindahkannya di belakang yang lain. Ini bukan kata yang dilindungi undang-undang sehingga Anda dapat mendeklarasikan variabel Anda sendiri atau fungsi yang disebut blur tetapi jika Anda melakukannya maka Anda tidak akan dapat menggunakan metode ini untuk mengontrol objek mana yang saat ini.
SoftwareARM

2
Metode fokus digunakan untuk memberikan fokus (yaitu membuat saat ini) objek miliknya. Memberikan bidang teks fokus akan memindahkan kursor ke bidang itu. Memberi jendela fokus akan memindahkannya di depan yang lain. Tindakan yang tidak menentukan objek tertentu untuk diterapkan menggunakan objek yang memiliki fokus. Ini bukan kata yang dilindungi undang-undang sehingga Anda dapat mendeklarasikan variabel Anda sendiri atau fungsi yang disebut fokus tetapi jika Anda melakukannya, Anda tidak akan dapat menggunakan metode ini untuk mengontrol objek mana yang saat ini.
SoftwareARM

25
Penjelasan SoftwareARM tidak masuk akal bagi saya saat pertama kali membaca, jadi saya menemukan penjelasan alternatif pada halaman dokumentasi jQuery ( api.jquery.com/focusout ) yang saya pikir akan membantu orang lain: Acara fokus keluar dikirim ke suatu elemen ketika itu, atau elemen apa pun di dalamnya, kehilangan fokus. Ini berbeda dari peristiwa blur karena mendukung mendeteksi hilangnya fokus dari elemen induk (dengan kata lain, ini mendukung penggelembungan acara).
Brad


12

acara blur: saat elemen kehilangan fokus.

acara focusout: ketika elemen, atau elemen apa pun di dalamnya, kehilangan fokus.

Karena tidak ada apa pun di dalam elemen filter, baik blur maupun fokus akan berfungsi dalam kasus ini.

$(function() {
  $('#filter').blur(function() {
    $('#options').hide();
  });
})

jsfiddle with blur: http://jsfiddle.net/yznhb8pc/

$(function() {
  $('#filter').focusout(function() {
    $('#options').hide();
  });
})

jsfiddle dengan fokus: http://jsfiddle.net/yznhb8pc/1/


0

Jika 'Pilihan Keren' disembunyikan dari tampilan sebelum bidang difokuskan maka Anda ingin membuatnya di JQuery alih-alih memilikinya di DOM sehingga siapa pun yang menggunakan pembaca layar tidak akan melihat informasi yang tidak perlu. Mengapa mereka harus mendengarkannya ketika kita tidak harus melihatnya?

Jadi, Anda dapat mengatur variabel seperti:

var $coolOptions= $("<div id='options'></div>").text("Some cool options");

dan kemudian tambahkan (atau tambahkan) fokus

$("input[name='input_name']").focus(function() {
    $(this).append($coolOptions);
});

dan kemudian hapus ketika fokus berakhir

$("input[name='input_name']").focusout(function() {
    $('#options').remove();
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.