I have a form with several submit buttons. I would like the button's click events to fire when enter is pressed based on which textboxes currently have focus. I am able to specify one button using the code below by adding the onkeydown event to the body of the page and checking for Enter's keyCode
<body onkeydown="if(event.keyCode==13){document.getElementById('btnSearch').click();}">
...
</body>
I assume this code can be modified or call a function to perform a conditional to see if txtSearch or txtSubmit has focus and specify btnSearch or btnSubmit accordingly, but I am not experienced with javascript.
Any help/advice would be great!
I have a form with several submit buttons. I would like the button's click events to fire when enter is pressed based on which textboxes currently have focus. I am able to specify one button using the code below by adding the onkeydown event to the body of the page and checking for Enter's keyCode
<body onkeydown="if(event.keyCode==13){document.getElementById('btnSearch').click();}">
...
</body>
I assume this code can be modified or call a function to perform a conditional to see if txtSearch or txtSubmit has focus and specify btnSearch or btnSubmit accordingly, but I am not experienced with javascript.
Any help/advice would be great!
Share Improve this question edited Jul 14, 2010 at 17:10 Starwfanatic asked Jul 14, 2010 at 16:40 StarwfanaticStarwfanatic 6143 gold badges14 silver badges29 bronze badges3 Answers
Reset to default 4You 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./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
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.
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');" />