Code below works in IE, but not in FireFox.

I have unsuccessfully tried all solutions proposed in link below.

Function is invoked when ENTER is pressed. Alert fires if placed in first line of function, but first if statement is not processed.

Invoked via: onKeyPress="javascript:isEnter();" in control markup.

function isEnter(evnt) {
    evnt = (evnt) ? evnt : ((event) ? event : null);
        if (evnt) {

            var charCode = (evnt.charCode || evnt.charCode == 0) ? evnt.charCode : ((evnt.keyCode) ? evnt.keyCode : evnt.which);
            if (charCode == 13) {
                //do stuff
            }
        }
    }

link text

Code below works in IE, but not in FireFox.

I have unsuccessfully tried all solutions proposed in link below.

Function is invoked when ENTER is pressed. Alert fires if placed in first line of function, but first if statement is not processed.

Invoked via: onKeyPress="javascript:isEnter();" in control markup.

function isEnter(evnt) {
    evnt = (evnt) ? evnt : ((event) ? event : null);
        if (evnt) {

            var charCode = (evnt.charCode || evnt.charCode == 0) ? evnt.charCode : ((evnt.keyCode) ? evnt.keyCode : evnt.which);
            if (charCode == 13) {
                //do stuff
            }
        }
    }

link text

• javascript
• dom-events

4 Answers 4

onKeyPress="javascript:isEnter();" is wrong for two reasons: first, you shouldn't have the javascript: prefix since the whole contents of a key handler attribute are processed as JavaScript. This won't be preventing your code working since the javascript: prefix is interpreted as a label. What is preventing it working is the fact that you're not passing an event object to the isEnter function. Your onkeypress attribute should be

onkeypress="isEnter(event);"

This should work in most browsers. The reasoning is that the value of an event handler attribute acts as the body of a function which is passed a parameter named event. In IE event instead resolves to window.event, thus making this approach work in most browsers.

You could also simplify your function as follows:

function isEnter(evnt) {
    if (evnt)
        var charCode = evnt.keyCode || evnt.which;
        if (charCode == 13) {
            //do stuff
        }
    }
}

Thanks all.

I got this from another source. It solved the problem and appears pretty close to the answers above, but skips the if(evnt) portion.

As noted above, it is necessary to call with: onkeypress="isEnter(event);"

function isEnter(e) {
    e = e || window.event || {};
    var charCode = e.charCode || e.keyCode || e.which;
        if (charCode == 13) {
            // do stuff  
        }

 }

Your code is more confusing that you need it to be:

First Line of function: evnt = evnt || window.event; That will do the same thing.

Next, the charcode line: charCode = evnt.charCode || event.keyCode || event.which; This will actually work better than yours because (evnt.charCode || event.charCode == 0) will always return true.

x == 0 will return true when x is null, undefined, "", and 0.

Now, if I remember my HTML events, I think your javascript:isEnter() function should look more like this: isEnter(event). Your code isn't passing the event to the function on certain browsers (e.g, Firefox).

So, here's what we have:

onKeyPress="isEnter(event)"

function isEnter(e) {
    e = e || window.event;
    if (e) {
       var charCode = e.charCode || evnt.keyCode || evnt.which;
       if (charCode == 13) {
          //do stuff
       }
    }
}  

I don't remember if that's the best way to get the charCode, but javascript libraries like prototype, jQuery, dojo, will abstract a lot of those browser differences for you if you want to look to one of them. cheers.

You can extend the Event:

jQuery.Event.prototype.isEnter = function() {
  return this.which == 13;
}

Then use

e.isEnter();

Note: If you're not using jQuery, just removed the "jQuery." from the code above.

You can make it even better:

$(function(){
  $("input:text").keydown(function(e) {
   if (e.isEnter()) $(this).trigger("enterPressed", e);      
  });
});

$(function() {
  $("#myfield").bind("enterPressed", function(e) {
   console.log("enter pressed");
  });
});

Test it: http://jsfiddle/TfE6m/

and here without jQuery: http://jsfiddle/zqFer/

Your extended method and the method which triggers the event can be in a separate file, maybe called events.js, for example. Your code will be more clean!