jQuery event only if two elements are not focused

Question

I have a FIRST NAME and a LAST NAME text field. I want to display a line of text when either of them are focused and hide the line of text only when both elements are not focused.

My current code flips the text (hides then unhides) whenever I change focus from say the first name to the last.

I understand why, first name is getting blurred (triggering the hide animation) then last name gets the focus (triggering the show animation). This is undesirable for obvious reasons, I'm looking for an elegant fix.

HTML

<input type="text" placeholder="First" id="first" name="first" required>
<input type="text" placeholder="Last" id="last" name="last" required>
<p id="nameTxt" style="display: none">Blah blah blah</p>

Script

    $('#first, #last').focus(function() { $("#nameTxt").show(300); });
    $('#first, #last').blur(function() { $("#nameTxt").hide(150); });

See if this helps https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement — elclanrs, Dec 27 '13 at 06:13
possible duplicate of [When onblur occurs, how can I find out which element focus went \*to\*?](http://stackoverflow.com/questions/121499/when-onblur-occurs-how-can-i-find-out-which-element-focus-went-to) — Barmar, Dec 27 '13 at 06:26

score 1 · Accepted Answer · answered Dec 27 '13 at 06:16

1

You can do this:

var timerID;
$('#first, #last').focus(function() {
    clearTimeout(timerID);
    $("#nameTxt").show(300);
}).blur(function() {
    timerID = setTimeout(function() {
        $("#nameTxt").hide(150);
    }, 10);
});

Demo: http://jsfiddle.net/VBwYE/

That is, use setTimeout() to defer hiding the #nameTxt for just a few milliseconds, but then in the focus handler cancel the timeout. Note that you can chain .focus().blur() together to avoid having to select the same two elements again.

answered Dec 27 '13 at 06:16

nnnnnn

147,572
30
200
241

This works well, thanks! Just kind of wish we didn't have to use such a hackish method. :/ – Cody Smith Dec 27 '13 at 06:20
You're welcome. If you wait somebody else may have a more direct solution. – nnnnnn Dec 27 '13 at 06:25

score 1 · Answer 2 · answered Dec 27 '13 at 06:31

This is an interesting one! Here's a thought. You could do something like this:

$(document).mousedown(function(){
  if ($(event.target).attr("id") != "first" && $(event.target).attr("id") != "last") {
    // hide it
  }
  else{
    //show it
  }
});

Would only work for clicks though.

score 0 · Answer 3 · answered Dec 27 '13 at 06:14

0

$("#first, #last").blur(function() {
    if ($("#first:focus, #last:focus").length == 0) {
        $("#nameTxt").hide(150);
    }
});

answered Dec 27 '13 at 06:14

Barmar

741,623
53
500
612

This still caused the hide/show jag when changing from first to last. – Cody Smith Dec 27 '13 at 06:16
Results for testing the focus might vary depending on the browser (not all browsers trigger focus/blur/change events in the same order). – nnnnnn Dec 27 '13 at 06:20
I think that's the problem. When you click from one to the other, it first blurs the old field, then focuses the new field. So when the `blur()` handler runs, neither field is focused. – Barmar Dec 27 '13 at 06:23
I think I researched this a few months ago, and the specification requires that behavior. See http://stackoverflow.com/questions/121499/when-onblur-occurs-how-can-i-find-out-which-element-focus-went-to for workarounds. – Barmar Dec 27 '13 at 06:26

score 0 · Answer 4 · answered Dec 27 '13 at 06:15

Try

var $nt = $("#nameTxt");
$('#first, #last').focus(function () {
    clearTimeout($nt.data('nttimer'))
    $("#nameTxt").show(300);
});
$('#first, #last').blur(function () {
    var timer = setTimeout(function () {
        $("#nameTxt").hide(150);
    }, 200);
    $nt.data('nttimer', timer);
});

Demo: Fiddle

score 0 · Answer 5 · answered Dec 27 '13 at 06:17

0

Try this::

<script>
    $('#first, #last').focus(function() { $("#nameTxt").show(300); });
    $('#first, #last').on("blur focusout", function() { $("#nameTxt").hide(150); });   
</script>

Because some browser is not support blur event.

answered Dec 27 '13 at 06:17

Ringo

3,795
3
22
37

_"Because some browser is not support blur event"_ - Which browsers would that be? Either way this doesn't help with the problem the OP described. – nnnnnn Dec 27 '13 at 06:18
I mean IE8 and some older browser. – Ringo Dec 27 '13 at 06:20
IE has supported blur events since at least version 5.5. – nnnnnn Dec 27 '13 at 06:21
I read it on jquery page: "The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate()." – Ringo Dec 27 '13 at 06:26
"The blur event does not bubble in IE" means that the blur event _is_ supported in IE, it just doesn't bubble. Which doesn't matter at all for the OP's code which does not use bubbling. So I say again, IE has supported blur since at least v5.5. And, again, this is all irrelevant to the actual problem the OP described. – nnnnnn Dec 27 '13 at 06:39
Sorry for my confusion. Thanks for advice. I'll delete my answer – Ringo Dec 27 '13 at 06:49

jQuery event only if two elements are not focused

5 Answers5