views:

55

answers:

2

I have the following simple javascript code, which handles the Return Key, I don't want to submit the form when the return key is pressed in the textbox.

All this works fine, but in Firefox, if i show an alert message, then it stops working and the form starts getting submitted, whereas the exact code without alert message works fine and stops the form from being submitted. I dont understand why alert is spoiling the party..

    $("document").ready(function () {
        $("#input1").keydown(OnKeyDown);
    });


    function OnKeyDown(e) {
        if (e.keyCode == 13) {

            // alert('this will fail');  // Adding alert makes the form submit

            stopBubble(e);
            return false;
        }
    }

    function stopBubble (e) {

        // If an event object is provided, then this is a non-IE browser
        if (e && e.stopPropagation)
        // and therefore it supports the W3C stopPropagation() method
            e.stopPropagation();
        else
        // Otherwise, we need to use the Internet Explorer
        // way of cancelling event bubbling
            window.event.cancelBubble = true;
    }


  <input type="text" id="input1" value="">
+1  A: 

jQuery normalizes this already, you can just do:

$(document).ready(function () {
    $("#input1").keydown(OnKeyDown);
});

function OnKeyDown(e) {
    if (e.which == 13) {        //e.which is also normalized
        alert('this will fail');
        return false;
    }
}

When you do return false from a handler, jQuery calls event.preventDefault() and event.stopPropgation() internally already. You can also do the anonymous function version:

$(function () {
  $("#input1").keydown(function() {
    if (e.which == 13) return false;
  });
});
Nick Craver
Yeah but it does not work in Firefox if you show the alert message, try it.
ace
@ace - It does...I didn't change to `e.which` in the second shorter example though, just realized this, updated.
Nick Craver
+1  A: 

I don't really know if the event is normalized or not. But this is how I have to do it for it to work in all browsers:

$(whatever).keypress(function (e) {

    var k = e.keyCode || e.which;
    if (k == 13) {
        return false; // !!!
    }
});
Gregg
Intresting...it works on the keypress event, and not keydown event. Cool..thanks.
ace
`e.which` is normalized already, no need to check for both :)
Nick Craver
First point: it will work on the `keydown` event as well, except in Opera. Second: just use `e.which`. jQuery normalizes the event properties for you.
Tim Down
@Tim: keydown does not work when you show the alert message in firefox.
ace
@ace: I promise you, Firefox will report 13 for the `keyCode` property in a `keydown` event when the Return key is pressed.
Tim Down
@Time : I know it fires the event and also does report 13, however it still keeps submitting the form. Try it, i've tried it already. That is when an alert('message') is shown
ace
@Nick : You do need to check for var k = e.keyCode || e.which; e.which under keypress does not show the correct keyvalue in firefox when you handle both keypress and keydown.
ace
@ace - You don't need to check, as I said, jQuery normalizes it: http://github.com/jquery/jquery/blob/master/src/event.js#L507
Nick Craver