jQuery kaybedilen odak olayı

253

Bir giriş alanı odak alır ve bir kapsayıcı göstermeye çalışıyorum ve bu gerçek sorun - odak kaybolursa kap gizlemek. JQuery'nin odağı için tam tersi bir olay var mı?

Bazı örnek kodlar:

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

Ve yapmak istediğim şudur:

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

— xijo
kaynak

419

Öğe odağı kaybettiğinde işlevinizi çağırmak için blur olayını kullanın :

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

— canavar
kaynak

3

tarayıcı gibi krom otomatik doldurmak metin kutusu, ben bulanıklık tetikleyeceğini sanmıyorum ()

— pide

40

Bunun gibi:

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

— SoftwareARM
kaynak

10

bundan farkı blurnedir?

— cregox

5

Bulanıklaştırma yöntemi, ait olduğu nesneyi odağı kaldırmak (yani güncel olmayan yapmak) için kullanılır. Bir metin alanı bulanıklaştırıldığında imleç bir sonraki alana taşınır. Bir pencere bulanıklaştırıldığında diğer tüm pencerelerin arkasına geçilir. Bu ayrılmış bir sözcük değildir, bu nedenle kendi değişkeninizi veya bulanıklık olarak adlandırılan işlevi bildirebilirsiniz, ancak bunu yaparsanız, hangi nesnenin geçerli olduğunu denetlemek için bu yöntemi kullanamazsınız.

— Yazılım

2

Odaklanma yöntemi, ait olduğu nesneye odaklanmayı (yani güncel yapmayı) vermek için kullanılır. Bir metin alanına odaklanmak, imleci bu alana taşır. Bir pencereye odaklanmak pencereyi diğerlerinin önüne taşır. Odağı olan nesneyi kullanmak için uygulanacak belirli bir nesne belirtmeyen eylemler. Bu ayrılmış bir sözcük değildir, bu nedenle odak adı verilen kendi değişkeninizi veya işlevinizi bildirebilirsiniz, ancak bunu yaparsanız, hangi nesnenin geçerli olduğunu denetlemek için bu yöntemi kullanamazsınız.

— Yazılım

25

SoftwareARM'nin açıklaması ilk okumada bana pek mantıklı gelmedi, bu yüzden jQuery'nin belge sayfasında ( api.jquery.com/focusout ) başkalarına yardımcı olacağını düşündüğüm alternatif bir açıklama buldum : Focusout olayı bir öğeye gönderildi veya içindeki herhangi bir öğe odağı kaybettiğinde. Bu, üst öğeden odak kaybının algılanmasını desteklediği için bulanıklaştırma olayından farklıdır (başka bir deyişle, olay köpürmesini destekler).

— Brad

33

"Bulanıklaştırma" kullanın: http://docs.jquery.com/Events/blur#fn

— NVRAM'ı
kaynak

12

blur olayı: öğe odağı kaybettiğinde.

focusout olayı: öğe veya içindeki herhangi bir öğe odağı kaybettiğinde.

Filtre öğesinin içinde hiçbir şey olmadığından, hem bulanıklık hem de odaklama bu durumda çalışır.

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

bulanıklık ile jsfiddle: http://jsfiddle.net/yznhb8pc/

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

odaklama ile jsfiddle: http://jsfiddle.net/yznhb8pc/1/

— Razan Paul
kaynak

0

'Serin Seçenekler' alan odaklanmadan önce görünümden gizlenmişse, bunu DOM'da kullanmak yerine JQuery'de oluşturmak istersiniz, böylece ekran okuyucu kullanan herkes gereksiz bilgileri görmez. Görmek zorunda olmadığımızda neden dinlemeliler?

Böylece aşağıdaki gibi değişkenler ayarlayabilirsiniz:

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

ve daha sonra odaklanmaya ekleyin

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

ve sonra odak bittiğinde kaldır

$("input[name='input_name']").focusout(function() {
    $('#options').remove();
});

— Sprose
kaynak