How To set Default Button for ENTER key

Question

We are using Sharepoint 2007 In which on master page we have Asp Image button. We want to set this image button as default button for enter key press. We tried some ways but not getting success.

Answer 1

Turned out more complicated than I thought but possible nonetheless. First of all, make sure the ID of your control is static:

<asp:ImageButton runat="server" ID="MyImageButton" ClientIDMode="Static" ImageUrl="pic.gif" OnClick="ImageButtonClicked"  />

Now what you need is the following JavaScript code in your .aspx or .master page:

<script type="text/javascript">
    var DEFAULT_BUTTON_ID = "MyImageButton";

    // Mozilla, Opera and webkit nightlies currently support this event
    if (document.addEventListener) {
        // A fallback to window.onload, that will always work
        window.addEventListener("load", HandleDefaultButton, false);
        // If IE event model is used
    } else if (document.attachEvent) {
        // A fallback to window.onload, that will always work
        window.attachEvent("onload", HandleDefaultButton);
    }

    function HandleDefaultButton() {
        var inputs = document.getElementsByTagName("input");

        //attach event for all inputs
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];

            //maybe already got handler so add instead of override
            if (document.addEventListener)
                input.addEventListener("keypress", InputElement_KeyPressed, false);
            else if (document.attachEvent)
                input.attachEvent("onkeypress", InputElement_KeyPressed);
        }
    }

    function InputElement_KeyPressed(evt) {
        if (DEFAULT_BUTTON_ID && DEFAULT_BUTTON_ID.length > 0) {
            //old IE event module
            if (typeof evt == "undefined" || !evt)
                evt = window.event;
            var keyCode = evt.keyCode || evt.which;
            if (keyCode === 13) {
                var oButton = document.getElementById(DEFAULT_BUTTON_ID);
                if (oButton) {
                    oButton.click();
                    return false;
                } else {
                    alert("---DEBUG--- default button is defined but does not exist (" + DEFAULT_BUTTON_ID + ")");
                }
            }
        }
        return true;
    }
</script>

You just need to define the real ID as the value of DEFAULT_BUTTON_ID and the code will automatically attach keypress event to all inputs (text, checkbox and radio) and when Enter is pressed, the button defined as default will get clicked.

As you're using SharePoint is means window.onload is already in use so we must add our own event not override it.