TL;DR how can I get this self-explanatory JSFiddle to work?
From the W3C:
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
The basic idea, HTML:
<form>
<label>
<input type="text" />
<a href="#">after focusing in input, there should be no blur when clicking here</a>
</label>
</form>
<a href="#">but blur should fire when clicking here</a>
And JS:
$("form, label").on("blur", function() {
alert("you're not going to see this");
});
It doesn't work. A more illustrative example is in this JSFiddle.
I also tried focusout
, with this JSFiddle, but (presumably because it bubbles up from the input), it always fires.
I could probably rig up what I need with a hack like this: https://stackoverflow.com/a/5049387/458614 but I'd rather not have to.
Edit: There are lots of related questions and I have read all that I could find, none of which help. Some talk about setting tabindex=0
on the form
or label
elements. I have tried this in various permutations but it doesn't help. JSFiddle here. If you put it on the form
, blur
events do fire when you click outside the form. However, it doesn't apply to any of it's children: it won't pick up anything if you click on the input
and then outside the form
.
Edit 2: I don't really understand some of the answers posted so far and none seem to really... work. Anyway, to clarify, here is what I am trying to accomplish:
In my app, you can add tags to documents. When you click the "add tag" button, a previously-hidden text input field pops up and is focused. And then...
- Clicking outside (on blur) should close the text input field again
- Pressing enter should add the tag and close the input field
- Clicking the "add tag" button should also add the tag and close the input field
The problem is that #1 and #3 are incompatible. The "add tag" button needs to perform a different action based on whether the text field is open or closed, but because I can only achieve #1 with an onblur
event on the text field, the text field is closed by the time any action happens on the "add tag" button for #3.
Here is a JSFiddle with my best attempt so far.