jQuery lose focus event

Question

I'm trying to show up a container if a input field gets the focus and - that's the actual problem - hide the container if focus is lost. Is there an opposite event for jQuery's focus?

Some example code:

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

And what I'd like to do is something like this:

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

Derna

Answer 1

Use blur event to call your function when element loses focus :

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

Weald

what if the browser like chrome auto fill the textbox, i don't think it will trigger the blur() – Tswana

Answer 2

Like this:

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

Tellurate

what's the difference from this to blur? – Acidimeter

The blur method is used to remove the focus (ie make non-current) the object that it belongs to. Giving a text field the blur will move the cursor to the next field. Giving a window the blur will move it behind all of the others. This is not a reserved word so you can declare your own variable or function called blur but if you do then you will not be able to use this method to control which object is current. – Tellurate

The focus method is used to give the focus (ie make current) the object that it belongs to. Giving a text field the focus will move the cursor to that field. Giving a window the focus will move it in front of all of the others. Actions that do not specify a particular object to apply to use the one that has the focus. This is not a reserved word so you can declare your own variable or function called focus but if you do then you will not be able to use this method to control which object is current. – Tellurate

SoftwareARM's explanation didn't make much sense to me at first read, so I found an alternate explanation on jQuery's documentation page (api.jquery.com/focusout) that I thought would be helpful to others: The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus from parent elements (in other words, it supports event bubbling). – Trant

Answer 3

Use "blur": http://docs.jquery.com/Events/blur#fn

Banky

Answer 4

blur event: when the element loses focus.

focusout event: when the element, or any element inside of it, loses focus.

As there is nothing inside the filter element, both blur and focusout will work in this case.

$(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/

Launder

Answer 5

If the 'Cool Options' are hidden from the view before the field is focused then you would want to create this in JQuery instead of having it in the DOM so anyone using a screen reader wouldn't see unnecessary information. Why should they have to listen to it when we don't have to see it?

So you can setup variables like so:

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

and then append (or prepend) on focus

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

and then remove when the focus ends

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

Psychopath

Answer 6

When the element is loaded via AJAX use the .on function

$.on('blur', '#filter', function ($event) {});

Nautical