onkeyup handler not being called

Question

I found a post on SO that was actually posted yesterday (I cannot find it now) that says my code below should work, but it does not -- the 'handleRtnKey(e)' function below is never called - why?

<input type="text" id="zer" onkeyup="handleRtnKey(e)"/>

// my javascript function -- by the way, I will not be using jquery.
function handleRtnKey(e)
{
    alert("Just entered handleRtnKey()");

    if (!e) 
    {
        e = window.event;   // resolve event instance for IE    
    }

    alert("Just entered handleRtnKey(), e.keyCode is: " + e.keyCode);
    alert("Just entered handleRtnKey(), e is: " + e);

    if (e.keyCode == '13')
    {
      alert("handleRtnKey: got the RTN key up event.");
      return false;
    }
}

None of the alerts fire.

I found a SO post from yesterday that had this near exact code (without my alerts) that claimed to work fine (sorry I cannot re-find that SO post).

I need to use straight javascript (not jquery) to get the key code of the keyup event in my input text box -- that's all I need to do, and if it is the Return key, then I'll take some action, but for now I cannot get the above code to fire that handleRtnKey() function -- why?

EDIT

Damon introduced me to the keyword 'event' and the above code now works fine -- I simply renamed the argument in the html code from 'e' to 'event' and the javascript handler now works fine -- here is the only modification to the code above I had to make:

 // OLD
 <input type="text" id="zer" onkeyup="handleRtnKey(e)"/>

 // NEW
 <input type="text" id="zer" onkeyup="handleRtnKey(event)"/>

NOTE: the javascript function handleRtnKey(e) is unchanged, there was no reason for my to change that function's signature, it looks like below and works fine now:

function handleRtnKey(e)
{
    alert("Just entered handleRtnKey()");

    if (!e) 
    {
        e = window.event;   // resolve event instance for IE    
    }

    alert("Just entered handleRtnKey(), e.keyCode is: " + e.keyCode);
    alert("Just entered handleRtnKey(), e is: " + e);

    if (e.keyCode == '13')
    {
      alert("handleRtnKey: got the RTN key up event.");
      return false;
    }
}

 THANKS DAMON.

Look at the console `Uncaught ReferenceError: e is not defined` — epascarello, Sep 07 '13 at 18:23
Yep I know the event is undefined -- but I have seen several posts on SO that describe passing an 'event' argument from the html's onkeyup to the function -- such as the 3rd answer and the onkeypress handler here in this SO post, specifically this line of code: onkeypress="searchKeyPress(event); -- http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box — CFHcoder, Sep 07 '13 at 18:27
Read this: http://www.quirksmode.org/js/introevents.html ANd in that post they are passing `event` which is not `e`. — epascarello, Sep 07 '13 at 18:29
@vladkras Really? Are you sure. Look at my first comment on what the error message it. It is not defined in the event handler, it is defined in the function. — epascarello, Sep 07 '13 at 18:35

score 1 · Answer 1 · answered Sep 07 '13 at 18:58

1

you don't need argument at all, just use event:

function handleRtnKey() {
    event = event || window.event; // for cross-browsing
    alert(event); // or do whatever you want with it
};

DEMO

answered Sep 07 '13 at 18:58

vladkras

16,483
4
45
55

user2545521 · Answer 2 · 2013-09-07T18:40:15.180

0

The problem is that you call the method with parameter which you don't have. e is not declared. If you remove it it will work. This code worked for me:

<input type="text" id="zer"/>

<script>
window.onload = function () {
    document.getElementById("zer").onkeyup = function(event) {
        if (event.keyCode == 13) {
            alert("Just entered handleRtnKey()");
        }
    };
};
</script>

edited Sep 07 '13 at 18:40

answered Sep 07 '13 at 18:16

user2545521

63
1
9

I'd already noticed that but then I have no event from which to extract the key code. All the examples on SO I've seen have the argument to the onkeyup handler function declared in the html, such as here - look at the 2nd answer from Tim Down: stackoverflow.com/questions/6275217/firefox-html-keyup-event-has-no-event-data/6275969#6275969 – CFHcoder Sep 07 '13 at 18:23
Haven't you just answered your own question? You need to pass the keyword 'event' as the argument? – Damon Sep 07 '13 at 18:27
remove the `e` and try it! – epascarello Sep 07 '13 at 18:29
@epascarello, thanks but as I mentioned above, I already figured out that removing the argument at least allows the handler to be invoked, but then I need the event to get the keycode, so I must be able to get access to the actual event object. 'remove the e and try it' as I said I've done that already (see above where I said "I'd already noticed that") -- and thanks for the suggestion. – CFHcoder Sep 07 '13 at 18:35
The !e check in your original code will take care of e not being defined so you will have the event object. The code runs: http://jsfiddle.net/X2AXH/ What is your problem now? – epascarello Sep 07 '13 at 18:39
@Damon, I'm not in my experience aware that javascript has a reserved word called 'event' but I'll try it -- thanks. – CFHcoder Sep 07 '13 at 18:39
@epascarello, not sure if you're aware, but e = window.event is a bit browser-specific, at least so I'm led to believe. On my version of Firefox (version 23.0.1), window.event still leaves 'e' as 'undefined.' – CFHcoder Sep 07 '13 at 18:43
@Damon -- thank you, my problem here was that I was unaware that 'event' is a pre-defined keyword -- I will edit my code above to show how I got this to work -- thanks. – CFHcoder Sep 07 '13 at 18:47
No worries, as I said, you answered your own question :) – Damon Sep 07 '13 at 18:49

score 0 · Answer 3 · answered Sep 08 '13 at 19:58

0

The solution to my problem was as Damon pointed out in his comments above -- I was not aware there was a predefined 'event' keyword and when I used 'event' instead of 'e' in my code above, it worked fine.

answered Sep 08 '13 at 19:58

CFHcoder

429
2
8
25

onkeyup handler not being called

3 Answers3