[ACCEPTED]-Handle user hitting 'Enter' key in a ASP.NET MVC web site-asp.net-mvc

Accepted answer
Score: 37

First off, this is wrong:

<input type="submit" name="SubmitButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="submit" name="SubmitButton" value="Back" />

All three of them 7 are submit buttons. A reset is an input 6 of type="reset". Get that sorted. Second 5 of all, I've successfully implemented something 4 like that, and it works on IE6. Try this:

    function keypressHandler(e)
    {
        if(e.which == 13) {
            e.preventDefault(); //stops default action: submitting form
            $(this).blur();
            $('#SubmitButton').focus().click();//give your submit an ID
        }
    }

    $('#myForm').keypress(keypressHandler);

The 3 focus() part makes the button appear to 2 be pressed when the user presses enter. Quite 1 nifty.

Score: 12

Use this.

$(function(){
    $('input').keydown(function(e){
        if (e.keyCode == 13) {
            $("input[value='OK']").focus().click();
            return false;
        }
    });
});

0

Score: 4

You should only have one submit button. The 13 reset button should be type="reset" and the back button 12 should probably be type="button" like this:

<input type="reset" name="ResetButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="button" name="BackButton" value="Back" />

Then, Reset 11 and OK will just work the way they are supposed 10 to and you'll only need to handle the Back 9 button click with Javascript.

Edit: The other 8 option would be to place the Reset and Back 7 submit buttons each in their own forms inside 6 iframes. Then they would be ignored by the 5 main form and wouldn't be default buttons. Also, this 4 would allow you to point them to different 3 server actions if needed and there wouldn't 2 be any reliance on Javascript for the button 1 actions.

Score: 4

HTML standard seems to specify that the 28 first submit button will be assumed if 27 a user press the 'Enter' key.

No, the usage 26 of the enter key isn't defined, it's a propritary 25 extension that's been added under various 24 interpretations. You will get different 23 behavoir in different browsers (and it can 22 become very dangerous when you start mixing 21 in different cultural or UI conventions 20 about left to right/right to left ordering 19 of options).

If there is only 1 button on 18 the form then all the mainstream browsers 17 happen to follow the same behavior - they 16 submit the form as if that button was pressed 15 (a buttonName=buttonValue is included with 14 the form data). Of course this doesn't mean 13 the buttons onclick handler is going to 12 fire - that behavoir is browser specific.

When 11 there are several buttons it's a complete 10 crap shoot. Some browsers decide that the first 9 button (and the definition of first can 8 vary - most use the first one mentioned 7 in the Html tree, while others attempt to 6 use screen position) was clicked and use 5 it in the submission, while other browsers 4 (notably some versions of IE) make the equally 3 correct assumption that no specific button was pressed, and 2 so don't include a buttonName=buttonValue 1 (the rest of the form is submitted fine).

Score: 3

Since you use jquery, if you use hotkeys plugin, you can 1 make a such approach:

$(document).bind('keydown', 'return', function (evt){
    $.next("input[value='OK']").trigger("click");
    return false;
});
Score: 1

Change button order in source but not visually 1 (ie, use CSS to swap the buttons)?

More Related questions