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.

Possible only with JavaScript since it's not ordinary submit button. — Shadow The GPT Wizard, Apr 02 '12 at 06:54

score 0 · Answer 1 · answered Apr 02 '12 at 07:26

0

You can set the DefaultButton property to the id of the button you want to be default in the form tag.

answered Apr 02 '12 at 07:26

Mert Akcakaya

3,109
2
31
42

Yes we tried DefaultButton property;It is working in .Net but in sharepoint it is not working. Don't know why – Rushikesh Apr 02 '12 at 07:42
Checkout the [link](http://havivi.blogspot.com/2009/09/set-focus-set-default-button-to.html). You should add the control first and then set the default button, otherwise you set the default button to null since the control is not added to the form. – Mert Akcakaya Apr 02 '12 at 07:55

score 0 · Accepted Answer · answered Apr 02 '12 at 08:04

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.

How To set Default Button for ENTER key

2 Answers2