Blur event that does not fire on <label> cannot find a workaround for working with blur-hide text box

Question

TL; DR How can I get this self-evident JSFiddle to work?

From W3C :

A blur event occurs when an element loses focus either through a pointing device or by navigating through a tab. 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"); }); 

This does not work. A more obvious example is this JSFiddle .

I also tried focusout , this JSFiddle , but (apparently because it is bubbling from the input), it always fires.

Perhaps I could fine-tune what I need with a hack: https://stackoverflow.com/a/166269/2127/ , but I would not want that.

---

Edit: There are many related questions, and I read everything I could find, none of which would help. Some talk about setting tabindex=0 form or label elements. I tried this in different permutations, but it does not help. JSFiddle here . If you put it on a form , blur events fire when you step outside the form. However, this does not apply to any of these children: it will not pick anything up if you click on input and then outside the form .

---

Edit 2: I really don't understand some of the answers posted so far, and none of them seem really ... work. In any case, to clarify, here is what I am trying to accomplish:

In my application, you can add tags to documents. When you click the "Add Tag" button, a pop-up and previously focused text input field appears. And then...

• Clicking outside (on blur) should close the input text box again
• When you press the enter key, 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 should perform another action based on whether the text field is open or closed, but since I can only reach # 1 with the onblur event in the text field, the text field closes by the time any action occurs when the " Add tag to # 3.

Here is a JSFiddle with my best attempt so far .

Answer 1

I think you are looking

e.stopPropagation();

This script here shows a slightly different way of dealing with this ... it puts the skin on the click of the window (which will blur the input anyway), except for the label that would allow the click event to stop inside the label.

Happy coding!

Answer 2

use the code below to achieve the desired

  $(document).on("blur", "label",function() { $("div").append("form or label blurred<br>"); }); 

Here is a demo of Fiddle

Answer 3

Try it, it should work

 .focus { border-color:red; } $(document).ready(function() { $('input').blur(function(){ $('input').removeClass("focus"); }) .focus(function() { $(this).addClass("focus") }); }); 

Answer 4

Add this js piece to your Fiddle. You added a listener for the tag, but the blur happens on the anchor tag.

  $("form a").on("blur", function() { $("div").append("form or label blurred<br>"); }); 

Answer 5

according to your explanation, I created a demo

 $("form > label >a").on("blur", function() { return false }); $("#outsideform > a").on("blur", function() { alert("but blur should fire when clicking here"); }); 

Check out the demo here.

Answer 6

For some time I post intermediate development. But it will definitely help you exactly where you should look. An implementation of jquery, but not your javascript . This is a real problem.

I added three lines in different places. no big changes.

• Added || $("input").css("visibility") == "visible" || $("input").css("visibility") == "visible" in if state
• Added $("input").css("visibility","hidden"); into the internal condition
• $("input").css("visibility","visible"); to the external (and last) else condition.

Note that this is an intermediate, you need to double-click after sending non-empty text. If I get the time, I would post the correct work. This is a violin.

Answer 7

tobek, your JSFiddle with my best attempt is still almost there. The problem is that your selector is below in this section of code:

 $("input").on("blur", function(){ $("input").hide(); }); 

You correctly formulated the problem in your comments when you said: "PROBLEM: we never go here because it is already hidden, because the entrance is foggy."

Modify the section above and I think you will have what you are looking for.

 $("input-blur label").on("blur", function(){ $("input").hide(); }); 

Since the Add Tag link is inside the label, clicking it does not invoke the blur feature.