ansaurus

Question

How can I fire a Button Click event when Enter Key is pressed based on what textbox has focus?

Answer 1

+1 A:

The first problem might just be a typo but you need to add a single quote and remove the semi-colon in your code above.

<body onkeydown="if(event.keyCode==13){document.getElementById('btnSearch').click();}">
...
</body>

But I don't think capturing a global key down event is the best way to go. I would add the onkeydown to the actual form controls so you aren't just picking up every enter. Also doing that you can specify in the event handler method call a parameter that indicates which textbox is being used.

<input type="text" onkeydown="KeyDownEventHandler(event, 1);" />

Then you just write the method to handle all the key capture events:

function KeyDownEventHandler(e, box)
{
    var charCode = (e.which) ? e.which : event.keyCode
    if(charCode==13)
        document.getElementById('btnSearch' + box).click();
}

I changed the keycode detection to better work with other browsers.

spinon 2010-07-14 16:52:33

This is working if I change it to use any charCode other than enter. When I use enter the first button always fires as if I still had it declared as the default button on the page. I checked to make sure I wasnt setting the default somewhere and I'm not. Is there a way to disable the default button so it doesnt override the control level script?

Starwfanatic 2010-07-14 18:12:55

Did you take the code out of the body tag? you wouldn't need that anymore if you are putting it on each control. Can you post your page to see what is happening?

spinon 2010-07-14 18:47:27

Answer 2

+2 A:

You can use asp:Panel controls to help you with this. An asp:Panel has "DefaultButton" where you specify a button's ID.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.panel.defaultbutton.aspx

It might not be exactly what you need, but it has always been enough for my needs.

<asp:Panel runat="server" DefaultButton="btnSearch">
   <asp:TextBox id="txtSearch" runat="server" />
   <asp:Button id="btnSearch" runat="server" text="Start search" />
</asp:Panel>

<asp:Panel runat="server" DefaultButton="btnSubmit">
   ....
   <asp:Button id="btnSubmit" runat="server" text="Submit" />
</asp:Panel>

Hope this helps you.

Regards

bgs264 2010-07-14 16:52:43

Thanks for your input. It works, however I am using a table to organize my text boxes and buttons. Rather than splitting my table or adding panels to individual cells I am going with spinon's solution. I will most likely use this approach in future applications as it is simpler. :)

Starwfanatic 2010-07-14 17:58:28

@Starwfanatic: Have you considered using divs' for your layout instead of tables. It will give you the benefits of progressive rendering and allowing you use the default asp.net functionality.

Yuriy Faktorovich 2010-07-14 18:21:19

I had not considered that. I'm new to asp.net, so I appreciate the suggestion. I will look into that in future programs.

Starwfanatic 2010-07-14 19:13:01

Answer 3

A:

I finally got the results I was after. I needed to use a function to stop the default 'enter' button from firing and another function to fire the correct button's click event. Here is the script used:

<script type="text/javascript">
function KeyDownEventHandler(e, box) {
    var charCode = (e.which) ? e.which : event.keyCode
    if (charCode == 13)
        document.getElementById(box).click();
}

function DisableEnterKey() {
    if (event.keyCode == 13) {
        return false;
    }
    else {
        return true;
    }
}
</script>

I called the DisableEnterKey function from the body's onkeydown event and the KeyDownEventHandler from the textbox's onkeydown event:

<body onkeydown="return DisableEnterKey()">
...
<input id="txtSearch" type="text" runat="server" onkeydown="KeyDownEventHandler(event, 'btnSearch');" />
...
<input id="txtAddEor" type="text" runat="server" onkeydown="KeyDownEventHandler(event, 'btnAddEor');" />
...
<input id="txtCategory" type="text" runat="server" onkeydown="KeyDownEventHandler(event, 'btnAddEor');" />

Starwfanatic 2010-07-14 21:59:27

ansaurus

tags:

views:

answers:

How can I fire a Button Click event when Enter Key is pressed based on what textbox has focus?

related questions