...a lot of different controls... ...a lot of different controls... ...a lot of different controls...

Pressing enter on LinkButton fires DefaultButton instead of focused LinkButton

400 Views Asked by At

We have a code:

<asp:Panel runat="server" DefaultButton="ButtonNext">
    ...a lot of different controls...
    <asp:Button runat="server" ID="ButtonPrev" OnClick="ButtonPrev_OnClick" Text="Prev"/>
    <asp:Button runat="server" ID="ButtonNext" OnClick="ButtonNext_OnClick" Text="Next"/>
</asp:Panel>

When focus is placed on ButtonPrev and Enter is pressed, DefaultButton is clicked instead of ButtonPrev:

enter image description here

What can I do to modify this behavior? I am looking for simple solution.

I know I can wrap ButtonPrev in Panel:

<asp:Panel runat="server" DefaultButton="ButtonNext">
    <asp:Panel runat="server" DefaultButton="ButtonPrev">
        <asp:Button runat="server" ID="ButtonPrev" OnClick="ButtonPrev_OnClick" Text="Prev"/>
    </asp:Panel>
    <asp:Button runat="server" ID="ButtonNext" OnClick="ButtonNext_OnClick" Text="Next"/>
</asp:Panel>

It is a solution, but it causes styling issues (additional div).

I know I can use JavaScript:

<asp:Panel runat="server" DefaultButton="ButtonNext">
    <asp:Button runat="server" ID="ButtonNext" OnClick="ButtonNext_OnClick" Text="Next"/>
    <asp:Button runat="server" ID="ButtonPrev" CssClass="DisableDefaultButton" OnClick="ButtonPrev_OnClick" Text="Prev"/>
</asp:Panel>

<script type="text/javascript">
    $('.DisableDefaultButton').on('keypress',
        function(e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 13) { //Enter keycode
                $(this).click();
                e.preventDefault();
            }
        }
    )
</script>

This solution I am using right now, but I don't like it.

Is there something I am not seeing?

0

There are 0 best solutions below