Capture Enter Key in ASP.NET

E

ewillyb

Hi,

ASP.NET has some interesting behavior when the user hits the Enter key.
If there are multiple ASP:Buttons (rendered as HTML submits) on the
form, when the user hits enter, the first button's click event will
fire and the page will submit.

I have a series of pages with Previous and Next navigational Btns. The
Previous button is the first button, so when the user hits enter, the
previous page is served up. Enter should result in the NEXT page being
served up.

I would like to capture the Enter keystroke, suppress the Previous Btn
click event and call a method to trigger the Next Btn click event, thus
submitting the page correctly.

That's putting it simply. My implementation is slightly more
complicated. The Previous and Next Btns are on a user control (so they
can be used on each page). Also, on some pages, there are more buttons
and different scenarios in which an Enter Click should not result in
the page submitting at all. I basically need to capture the Enter
click so that I may then determine where the user's focus is and then
call the right handlers.

I'm pretty sure JavaScript will be needed in this solution.

Thanks!
Eric
 
S

Scott M.

This is not a .NET issue, it is a function of the client. You'll need to
add a client-side script that captures the onKeyPress event and checks for
the ENTER key.
 
K

Ken Dopierala Jr.

Hi,

You'll need to use Javascript. In your body tag place this:

onkeydown="CheckKey(event);"

Then do what you need to do in the CheckKey() function:

function CheckKey() {
if (event.keyCode == 13) {
document.getElementById("btnLogin").focus();
}
}

The function above tests for the Enter key. If the Enter key is pressed it
switches focus to the btnLogin button which causes the client to apply the
Enter key as if the btnLogin button had the focus to begin with. In this
case the button just does a post back. Note you could also capture the 'N'
and 'P' keys so the user could hit those to navigate. I normally capture
the Alt key and then display hot-key codes on all my buttons so users can
hit 'Alt-S' to save, 'Alt-N' for next and etc. This let's my clients use
the web app just like they would a data entry intensive Windows or Terminal
app. Good luck! Ken.
 
E

ewillyb

Thanks for the info, Ken.

I'm capturing the Entery Key stroke successfully, but I can't manage to
suppress the btn click event that is ocurring on the wrong (Previous)
btn.

Here's my js:
<script language=javascript>
function captureEnterKey() {
if(event.keyCode == 13) {
alert('keycode= ' + event.keyCode);
(document.getElementById(NavStrip1.CmdNextID)).focus();
}
}
</script>

Where NavStrip1 is my user control containing the btns. It's registered
on page like so:

<%@ Register TagPrefix="uc1" TagName="NavStrip"
Src="Controls/Wizard/NavStrip.ascx" %>

And included like so:
<uc1:navstrip id=NavStrip1 runat="server"></uc1:navstrip>

CmdNextID is a property exposing the name of the btn that I want to
fire. Like so:

public string CmdNextID {
get { return "cmdNext"; }
}

Here's the js call:

<body MS_POSITIONING="GridLayout" onkeydown="javascript:
captureEnterKey();">

The alert is being reached, but a breakpoint on the CmdNextID property
never gets hit. And, most importantly, cmdPrevious btn is firing.

Thanks,
Eric
 
E

ewillyb

changed JS to:
<script language=javascript>
function captureEnterKey() {
if(event.keyCode == 13) {
alert('keycode= ' + event.keyCode);
(document.getElementById(NavStrip1.CmdNextID)).focus();
event.returnValue = false;
}
}
</script>

SAME RESULT. Wrong btn fires.
 
K

Ken Dopierala Jr.

Hi,

Try commenting out the alert() line and see if does anything. Also, keep
the alert() line commented out and put a breakpoint (debugger;) just before
this line:

(document.getElementById(NavStrip1.CmdNextID)).focus();

Find out if document.getElementById(NavStrip1.CmdNextID) equals what it
should.

One other thing is to change this line:

(document.getElementById(NavStrip1.CmdNextID)).focus();

To this:

document.getElementById(NavStrip1.CmdNextID).focus();

Don't know if it will make a difference but I don't think you need the extra
set of paranthesis. If that still doesn't work then there is a good chance
that the tab strip you are using is doing the same thing you are doing now
and overriding the code you've added. Check if there is a property on it to
change which button submits when Enter is pressed. Good luck! Ken.
 
A

arangil

Joined
Sep 21, 2009
Messages
1
Reaction score
0
capture enter with multiple buttons on form

in case i have multiple buttons on form and i need to submit a specific button, this is what i do...

on body keypress put..

<body onkeypress="checkenter();" >

if they pressed enter key then..

<script language="javascript">

function checkenter()
{
if (event.keyCode == 13)
{
document.formname.btnnameyouwanttoactuallyinvoke.focus();
}
}

</script>

you dont have to use the button.click() to actually invoke a submit..this is automatically fired after the focus is achieved.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Toggle enter key 2
trap enter key 0
hitting the "enter" key 3
Disable Enter Key 2
Enter key in datagrid 1
Capture Enter Key in DataGrid 2
Enter Key 1
Hitting the enter key 3

Members online

No members online now.
Total: 47 (members: 2, guests: 45)
Robots: 467

Forum statistics

Threads
473,990
Messages
2,570,211
Members
46,796
Latest member
SteveBreed

Latest Threads

Top