jQuery blur and the enter key

Question

I am trying to update a div dynmically with a googlemap based on a zip code being entered. Its working fine if the user tabs away from the input box (id ZipCode) but if they press enter it doesn't blur the field. I have got a variation on this working with onkeyup, but one event calls the other and its a mess. Is it possible to kick the function off if either event occurs.

$(document).ready(function() {
    $("#ZipCode").blur(function() {
        $("#dynamic").load('googlemap.php', {zipcode: $('#ZipCode').val(), maxdistance:  $("input[name='MaxDistance']:checked").val() }, 
            function() {
            });
        });
}) ;

Thanks for any pointers.

score 32 · Answer 1 · edited Dec 28 '17 at 11:49

32

You can do this:

 $(document).ready(function() {    
     $("#ZipCode").bind('blur keyup',function(e) {  
          if (e.type === 'blur' || e.keyCode === 13)  
          // do your stuff here  
     });  
  });

Syntax: event.keyCode
Return Value: A Number, representing either a Unicode character code or the Unicode key code

edited Dec 28 '17 at 11:49

Anis Alibegić

2,941
3
13
28

answered Mar 25 '11 at 12:49

Town

14,706
3
48
72

4

just a side note that in ie I tried the blur, but the event trigger a focusout instead – sksallaj Sep 10 '12 at 17:40
2

I solved my problem based on this answer, but I had to replace "keyup" with "keydown", otherwise my forms were submited before my stuff ever got executed. – fpierrat Sep 17 '19 at 14:43
@fpierrat, had same issue, solved it by changing code to `if (e.type !== 'keyup' || (e.type === 'keyup' && e.keyCode === 13))` so it fire with either keyup or blur type – Marek Kus Nov 11 '20 at 10:19

William Niu · Answer 2 · 2011-03-26T15:23:11.057

12

After re-reading your question, I think what you want to do is, when the textbox (i.e. #ZipCode) is blurred, update the googlemap element; when enter key is pressed, blur the textbox, which in turn update the googlemap element.

In your comment you mentioned that, you don't want the Enter key to submit the form. You may need to handle the keypress event as well.

$(document).ready(function() {
    $("#ZipCode").blur(function() {
        $("#dynamic").load('googlemap.php', {zipcode: $('#ZipCode').val(), maxdistance:  $("input[name='MaxDistance']:checked").val() }, 
            function() {
        });
    });

    $("#ZipCode").keyup(function(e) {
        if (e.which == 13) // Enter key
            $(this).blur();
    });

    // prevent the Enter key from submitting the form
    $('#ZipCode').keypress(function(e) { return e.which != 13; });
}) ;

edited Mar 26 '11 at 15:23

answered Mar 25 '11 at 12:39

William Niu

15,798
7
53
93

Your syntax is wrong there mate, "blur, keyup" should be "blur keyup". – Town Mar 25 '11 at 12:53
Its not quite working correctly, it seems to do a double call and submit the page. (I put my input boxes inside a
so it should validate). – Jon Harris Mar 25 '11 at 14:41
I have revised my answer according to your comment and after reading your question again. – William Niu Mar 26 '11 at 15:23
I like this idea, because you can just add a snippet of code (the enter key thing) if you already have a blur function and don't have to change anything else <3 Works like a charm :) – MaggusK Sep 30 '22 at 19:32

score 12 · Answer 3 · answered Mar 25 '11 at 12:39

12

You could do this:

$(document).ready(function() {
$("#ZipCode").bind('blur keyup', function(e) {
    if(e.type === 'keyup' && e.keyCode !== 10 && e.keyCode !== 13) return;
    $("#dynamic").load('googlemap.php', {zipcode: $('#ZipCode').val(), maxdistance:  $("input[name='MaxDistance']:checked").val() }, 
        function() {
        });
    });
}) ;

answered Mar 25 '11 at 12:39

Andy Edinborough

4,367
1
29
28

1

does it need to check for 10 as well as 13? – Town Mar 25 '11 at 13:24
... well I was just about to say yes, and post a link to jsFiddle to prove it. Does jQuery normalize the keyCode? It seem's like back in the day, `Enter` and `Return` fired 13 and 10 respectively. Did this change? – Andy Edinborough Mar 25 '11 at 13:38
It was a genuine question rather than me trying to point out an issue with the code! :) I was wondering exactly that - whether jQuery normalises the keyCode. I had a quick Google and couldn't find any examples where anything but '13' was used with jQuery. – Town Mar 25 '11 at 15:50

score 0 · Answer 4 · answered Jul 15 '15 at 06:33

To allow only one event occurs. You can call the desired function in both the events blur and keypress. Finally the actual or desired function has to be called in blur event. Example
<input disabled="true" type="text" placeholder="Enter Start Location" id = "fromPlaceEntry" onkeypress="startHandlingFromSubmission(event)" onblur="startHandlingFromSubmission(event)">
We can call the startHandlingFromSubmission() function in the following way.

function startHandlingFromSubmission(e){
if(e.keyCode===13){ //To check enter event  
    $(e.target).blur();
}
if(e.keyCode===0){ //To check span event
    setTimeout(function() {
        handleFromPlaceSubmission(e);
    }, 200);
}
}

function handleFromPlaceSubmission(e){

        //This is the actual function which we desire to call
       if(e.keyCode === 0){ //executing only in case of blur event
       // your code goes here
       }
}

jQuery blur and the enter key

4 Answers4

Linked