How do I prevent the enter key from triggering focusout, when handling both focusout and keydown?

Question

I am handling two events, both focusout and keydown, in a $(elementID).on() event-handler.

Calling $(elementID).off("focusout keydown"); as the last line within the .on() event-handler seems to be partially working -- focusout is working correctly, but keydown is firing twice.

Edit: With @Barmar's findings, keydown is first triggering focusout and then keydown. This is happening in Firefox 22, but apparently not in Chrome 29.

Here is the HTML:

<input type = "text" id = "textField" />
<input type = "button" onclick = "setFocus();" value = "click here" />

<ol>
      <li>Type some text into the textfield.</li>
      <li>Click the button.</li>
      <li>
            Click out of the textfield, or
            <br />
            <i>press enter for some weird behavior.</i>
      </li>
</ol>

...here is the javascript / jQuery:

 function setFocus() {
       $("#textField").focus();
       $("#textField").select();

       var count = 1;
       $("#textField").on("focusout keydown", function(e) {

              // if clicked away, or the enter key is pressed:
              if (e.type == "focusout" || e.keyCode == 13) {
                     alert(e.type + ": " + count++);
              }

              // this doesn't seem to be working correctly:
              $("#textField").off("focusout keydown");
       });
 }

...and here is the jsFiddle.

@Barmar -- Wow, interesting... it alerts twice when enter is pressed in Firefox 22. — Ian Campbell, Jul 30 '13 at 01:49
I changed it to `alert(e.type+count++)`, and in FF this shows that it's firing a `focusout` event when you press Enter. — Barmar, Jul 30 '13 at 01:52
Aha, thanks @Barmar! That seems to be the problem, but why is this happening? — Ian Campbell, Jul 30 '13 at 01:56
Because when you press Enter, it goes to the next field, which means the focus is lost. But since it depends on the browser, one of them is probably wrong, or maybe the spec is ambiguous. — Barmar, Jul 30 '13 at 01:57
@Barmar -- sounds about right. Unfortunately `preventDefault()`, `stopPropagation()`, and `stopImmediatePropagation()` don't seem to be working.. — Ian Campbell, Jul 30 '13 at 02:04
Yeah, I tried preventDefault as well. Not sure what to recommend. — Barmar, Jul 30 '13 at 02:05
@Barmar -- I'm going to edit my question based on your findings. — Ian Campbell, Jul 30 '13 at 02:07
@Sathya -- I've been busy, but have now tried it and accepted your answer. — Ian Campbell, Aug 09 '13 at 13:09

score 5 · Accepted Answer · answered Aug 08 '13 at 13:33

From what i can deduce, that when you press enter keydown event is triggered alert for keydown opens and then focusout is triggered coz of enter default functionality then alert for focusout. So what you have to do is unbind the focusout if enter is pressed

    $("#textField").on("focusout keydown", function (e) {
        if (e.type == "focusout" || e.keyCode == 13) {
           if(e.keyCode == 13){
             $(this).unbind('focusout');
           }
        alert(e.type + ": " + count++);
        }
    $("#textField").off("focusout keydown");
    });

Here is the edited JsFiddle

score 0 · Answer 2 · answered Jul 30 '13 at 01:35

0

have you tried using the one event binding instead of on ? then you wouldnt have to unbind at the end.

  $("#textField").one("focusout keydown", function(e) {

          // if clicked away, or the enter key is pressed:
          if (e.type == "focusout" || e.keyCode == 13) {
                 alert(count++);
          }
   });

http://jsfiddle.net/yaFeF/12/

answered Jul 30 '13 at 01:35

mkoryak

57,086
61
201
257

Thanks for the information @mkoryak, this is useful, however `keydown` is still firing twice. – Ian Campbell Jul 30 '13 at 01:42

Ian Campbell · Answer 3 · 2013-07-30T03:24:42.100

Ok, so here is a nasty hack:

function setFocus() {
    $("#textField").focus();
    $("#textField").select();

    var count = 1;

    // when clicking away:
    $("#textField").on("focusout keydown", function(e) {
        var code = e.keyCode ? e.keyCode : e.which;

        // if the key is NOT the enter or tab keys, which also trigger focusout:
        if (code !== 13 && code !== 9) {
            alert(e.type + ": " + count++);
        }

        $("#textField").off("focusout keydown");
    });

    // when hitting enter, or tabbing away:
    $("#textField").on("keydown", function (e) {
        var code = e.keyCode ? e.keyCode : e.which;

        // if the key pressed is the enter or tab key:
        if (code === 13 || code === 9) {
            alert(e.type + ": " + count++);
        }

        $("#textField").off("keydown");
    });
}

...and the jsFiddle.

I don't consider this a viable solution though, because this leads to unnecessary code duplication and is difficult to understand.

It seems as if focusout and keydown are inseparable... So handling both simultaneously and checking that code !== 13 first, then handling only keydown and checking that code === 13 will separate the events.

However, now the Tab key has to be handled too, ack! So, I have congruently included checks for code !== 9 and code === 9 as well.

score 0 · Answer 4 · answered May 03 '14 at 15:17

$('Selector')
.on('keydown',function(e){
    if (13 == e.which) {
       // do somthing who lead 'focusout' like $('Somthing-else').click()
        $(this).unbind('focusout');
    }
})
.on('focusout', function(e){
    $('Somthing-else').click()
})

score -1 · Answer 5 · answered Jul 30 '13 at 01:51

-1

you have inline event.. setFocus(); that was called when button is clicked. remove inline event and change your script to this

$(document).ready(function(e) {
    var count= 1;
    $("#textField").on("focusout keydown", function(e) {
        if (e.type == "focusout" || e.keyCode == 13) {
            alert(count++);
        }
    });
});

answered Jul 30 '13 at 01:51

kashimu

174
2
9

He wants you to have to click on the button to enable the other event handlers. – Barmar Jul 30 '13 at 01:53
he wants? oh! sorry i dont see exactly that he wants to set that event on the button.. i see that his problem is some weird events that he wants to avoid – kashimu Jul 30 '13 at 01:58
Read the instructions in the text, it says to type some text, then click on the button, then press Enter to see the problem. Clicking on the button adds the event handler that has the problem. Anyway, I'll bet your code has the same problem of firing multiple events. – Barmar Jul 30 '13 at 01:59
See http://jsfiddle.net/yaFeF/26/. This is your code, and it has the same problem when you press Enter. – Barmar Jul 30 '13 at 02:03

How do I prevent the enter key from triggering focusout, when handling both focusout and keydown?

5 Answers5