Question

I’m looking for a cross browser solution to handling carriage return, to submit input from a text box.

My current issue is firefox…

javascript event is not defined

<input id="myinput" type="text" onkeydown="press();" value="X"/>

<script type="text/javascript">
function press() {
    if (event.keyCode == 13) {
    // do something
    }
}
<script>

I can use jquery.

Answer 1

Where does event come from? 🙂

Here is the solution you’re looking for:

// First, change the HTML to:
<input id="myinput" type="text" onkeydown="return press( event );" value="X" />

// Then, on the JS part:
function press( e ) {
    var evt = e || window.event
    // "e" is the standard behavior (FF, Chrome, Safari, Opera),
    // while "window.event" (or "event") is IE's behavior
    if ( evt.keyCode === 13 ) {
        // Do something

        // You can disable the form submission this way:
        return false
    }
}

Note the use of return in this function and the HTML event to prevent the form from submitting (which is the default behavior when you press [Enter] in a form’s field).

However, I’d recommend removing the javascript part in the HTML, and go straight with:

document.getElementById('myinput').onkeydown = function( e ) {
    // Your code
}

This allows you to have unobtrusive javascript

For the jQuery way, this’d be the following:

$('#myinput').on( 'keydown', function( e ) {
    // jQuery normalizes the "e" parameter, so you can use:
    if ( e.keyCode === 13 ) {
        // Do something
    }
} )

P.S.: event is actually the same as window.event, which is the correct use for IE. This is not the standard though, which other browsers (FF, Chrome…) use. Which is why we use the trick provided (var evt = e || window.event, where e was passed as argument).