jQuery lose focus event

Próbuję pokazać kontener, jeśli pole wejściowe otrzyma fokus i - to jest rzeczywisty problem-ukryć kontener, jeśli fokus zostanie utracony. Czy jest odwrotne Zdarzenie dla jQuery ' s focus?

Przykładowy kod: 

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

A ja chciałbym zrobić coś takiego:

$('#filter').focus_lost(function() {
  $('#options').hide();
});
Author: Ufuk Hacıoğulları, 2009-09-14
Source

5 answers

Użyj zdarzenia blur , aby wywołać funkcję, gdy element traci ostrość : 

$('#filter').blur(function() {
  $('#options').hide();
});
 401
Author: Canavar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-14 19:54:50

Tak: 

$(selector).focusout(function () {
    //Your Code
});
 39
Author: SoftwareARM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-17 16:52:18
 33
Author: NVRAM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-09-14 19:56:06

Zdarzenie rozmycia: gdy element traci ostrość.

Zdarzenie Focusout: gdy element lub jakikolwiek element wewnątrz niego traci ostrość.

Ponieważ wewnątrz elementu filtrującego nie ma nic, zarówno rozmycie, jak i focusout będą działać w tym przypadku. 

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

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

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

Jsfiddle with focusout: http://jsfiddle.net/yznhb8pc/1/

 7
Author: Razan Paul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-17 20:28:25

Jeśli 'fajne opcje' są ukryte przed widokiem, zanim pole jest skupione, powinieneś utworzyć je w JQuery zamiast mieć je w DOM, aby każdy, kto używa czytnika ekranu, nie widział niepotrzebnych informacji. Dlaczego oni mają tego słuchać, skoro my nie musimy tego widzieć?

Więc możesz ustawić zmienne tak: 

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

A następnie dołącz (lub prepend) na focus 

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

A następnie usuń, gdy fokus się skończy 

$("input[name='input_name']").focusout(function() {
    $('#options').remove();
});
 0
Author: Sprose,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-27 08:03:57