MBR IT/.NET 247 : Setting Focus on Web Form buttons on ASPFriends.com 'aspngclient' list

Setting Focus on Web Form buttons

Messages

Related Types

This message was discovered on ASPFriends.com 'aspngclient' list.

Robm

-- Moved from [aspngfreeforall] to [aspngclient] by Tim Musschoot <Click here to reveal e-mail address> --

Hello

I have a webform which has 2 buttons on it. If the user clicks into a textb=
ox, I would like the button next to it to become focussed so that when a us=
er hits 'Enter' on the keyboard, it causes this button event to be activate=
d. Otherwise, I would like the default button to be the active button.

How do I do this?

Thanks,

Robert Merriott

Reply to this message...

Andy Smith

quite simply, you can't currently do this in any kind of reliable, =
cross-platform way.

every approach that i've tried or seen... breaks under certain =
circumstances or browsers. The basic problem is that the original plans =
for html did not include and thus define the "enter causes postback" =
behavior. It has been implemented differently and oddly on almost every =
browser and version in existance.

The only known workaround is to put your code into the TextChanged event =
of the textbox instead of the Click event of the button.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

Reply to this message...

Matt Serdar

this sets the active element and works well in IE
check the sample code out below

<html>
<head>
<script>
function ProcessKeyDown(){
keyTrap()
}
function keyTrap(){
document.Form1.btnSave.setActive()
}
</script>
</head>
<form name=Form1>
<body>
<input type=text id=box1 onfocus="keyTrap()" onmousedown="keyTrap()">
<br>
<input type=button id=btnCancel name=btnCancel value=Cancel>
<br>
<input type=button id=btnSave name=btnSave value=Save>

</body>
</form>
</html>

-----Original Message-----
From: Robm [mailto:Click here to reveal e-mail address]
Sent: Monday, July 15, 2002 10:28 AM
To: aspngclient
Subject: [aspngclient] Setting Focus on Web Form buttons

-- Moved from [aspngfreeforall] to [aspngclient] by Tim Musschoot
<Click here to reveal e-mail address> --

Hello

I have a webform which has 2 buttons on it. If the user clicks into a textb=
ox, I would like the button next to it to become focussed so that when a us=
er hits 'Enter' on the keyboard, it causes this button event to be activate=
d. Otherwise, I would like the default button to be the active button.

How do I do this?

Thanks,

Robert Merriott

| [aspngclient] member Click here to reveal e-mail address = YOUR ID
| http://www.aspfriends.com/aspfriends/aspngclient.asp = JOIN/QUIT

Reply to this message...

Robm

Andy,

Thanks for the quick reply. Fortunetly, this is for an internal IE only web=
site. I tried your suggestion of the TextChanged Event, but this causes ot=
her issues such as the wrong button under certain situations being clicked.

You mentioned other approaches, do you have any IE specific ones that may w=
ork?

Thanks,

Robert Merriott

>>> Click here to reveal e-mail address 07/15/02 11:08AM >>>
quite simply, you can't currently do this in any kind of reliable, cross-pl=
atform way.

every approach that i've tried or seen... breaks under certain circumstance=
s or browsers. The basic problem is that the original plans for html did no=
t include and thus define the "enter causes postback" behavior. It has been=
implemented differently and oddly on almost every browser and version in e=
xistance.

The only known workaround is to put your code into the TextChanged event of=
the textbox instead of the Click event of the button.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

| [aspngclient] member Click here to reveal e-mail address =3D YOUR ID
| http://www.aspfriends.com/aspfriends/aspngclient.asp =3D JOIN/QUIT

Reply to this message...

Robm

Thanks for the javascript.

Works perfectly.

Robert

>>> Click here to reveal e-mail address 07/15/02 11:15AM >>>
this sets the active element and works well in IE
check the sample code out below

<html>
<head>
<script>
function ProcessKeyDown(){
keyTrap()
}
function keyTrap(){
document.Form1.btnSave.setActive()
}
</script>
</head>
<form name=3DForm1>
<body>
<input type=3Dtext id=3Dbox1 onfocus=3D"keyTrap()" onmousedown=3D"keyTrap()=
">
<br>
<input type=3Dbutton id=3DbtnCancel name=3DbtnCancel value=3DCancel>
<br>
<input type=3Dbutton id=3DbtnSave name=3DbtnSave value=3DSave>

</body>
</form>
</html>

-----Original Message-----
From: Robm [mailto:Click here to reveal e-mail address]=20
Sent: Monday, July 15, 2002 10:28 AM
To: aspngclient
Subject: [aspngclient] Setting Focus on Web Form buttons

-- Moved from [aspngfreeforall] to [aspngclient] by Tim Musschoot
<Click here to reveal e-mail address> --

Hello

I have a webform which has 2 buttons on it. If the user clicks into a textb=
=3D
ox, I would like the button next to it to become focussed so that when a us=
=3D
er hits 'Enter' on the keyboard, it causes this button event to be activate=
=3D
d. Otherwise, I would like the default button to be the active button.

How do I do this?

Thanks,

Robert Merriott

| [aspngclient] member Click here to reveal e-mail address =3D YOUR ID
| http://www.aspfriends.com/aspfriends/aspngclient.asp =3D JOIN/QUIT

| [aspngclient] member Click here to reveal e-mail address =3D YOUR ID
| http://www.aspfriends.com/aspfriends/aspngclient.asp =3D JOIN/QUIT

Reply to this message...

Matthew Tamm

I have just been working a hack on this today...WARNING: long story to
follow

I have a form with a number of user controls on it, login, search, etc....my
client wants to be able to press enter in the control he is currently in,
and have that fire the appropriate server logic...I tried to explain browser
behavior mixed with Postback etc but to no avail.

My problem was that if the user was attempting to login and pressed 'Enter'
the serverside behavior of the 'Search' control was fired, it being empty,
the user is redirected to the advanced search page and the login procedure
is not fired..I simply, maybe incorrectly? assumed this is because of the
control tree, the search control being before the login control.

Of course, NS6 does cause the Postback and handles events somewhat
differently than IE. NS4 won't cause the Postback.

Ok, to my hack, and as Andy points out, this just may bomb on an untested
browser and/or platforms, but I have had success on IE5+, NS4 and NS6 and
that really does cover it for me right now

I have to controls, mySearch and myLogin, rendered, I get something like:
...
<td><input type=text name=mySearch_txtQuery id=mySearch_txtQuery></td>
<td><input type=submit name=mySearch_btnSubmit id=mySearch_btnSearch></td>
...
...
<td><input type=text name=myLogin_txtEmail id=myLogin_txtEmail></td>
<td><input type=password name=myLogin_txtPassword
id=myLogin_txtPassword></td>
<td><input type=submit name=myLogin_btnSubmit id=myLogin_btnLogin></td>

If my user is attempting to login, I need to simulate (on the client) a
myLogin_btnLogin.click(); and a mySearch_btnSearch.click(); for the search
control....

In the code-behind I added a custom attribute to each of the two controls
textboxes, "eventControl" with a value of the required button that needs the
event:

txtQuery.Attributes.Add("eventControl", btnSearch.ClientID);
...
txtEmail.Attributes.Add("eventControl", btnLogin.ClientID);
txtPassword.Attributes.Add("eventControl", btnLogin.ClientID);

Now my controls are rendered as:

...
<td><input type=text id=mySearch_txtQuery
eventControl=mySearch_btnSearch></td>
<td><input type=submit id=mySearch_btnSearch></td>
...
...
<td><input type=text id=myLogin_txtEmail eventControl=myLogin_btnLogin></td>
<td><input type=password id=myLogin_txtPassword
eventControl=myLogin_btnLogin></td>
<td><input type=submit id=myLogin_btnLogin></td>

now using some client script that captures the onkeypress, onkeydown
events...

function myKeyPress(e)
{
if(isIE)
{
var src = window.event.srcElement;
document.forms(0).elements.item(src.eventControl).focus();
document.forms(0).elements.item(src.eventControl).click();
}
else if(isNS6)
{

document.getElementById(e.target.getAttribute('eventControl')).focus();

document.getElementById(e.target.getAttribute('eventControl')).click();
}
}

Quite a hack and a mix of client/server work, if not using controls this
would be a simplier...but the idea would remain the same.

hth

Matt

----- Original Message -----
From: "Andy Smith" <Click here to reveal e-mail address>
To: "aspngclient" <Click here to reveal e-mail address>
Sent: Monday, July 15, 2002 1:08 PM
Subject: [aspngclient] RE: Setting Focus on Web Form buttons

quite simply, you can't currently do this in any kind of reliable,
cross-platform way.

every approach that i've tried or seen... breaks under certain circumstances
or browsers. The basic problem is that the original plans for html did not
include and thus define the "enter causes postback" behavior. It has been
implemented differently and oddly on almost every browser and version in
existance.

The only known workaround is to put your code into the TextChanged event of
the textbox instead of the Click event of the button.

__
Andy Smith
Keyboard Jockey #3a7-2.78.1

[Original message clipped]

Reply to this message...

MBR BootFX
Best-of-breed application framework for .NET projects, developed by Matthew Baxter-Reynolds and MBR IT

	Copyright © Matthew Baxter-Reynolds 2001-2008. '.NET 247 Software Development Services' is a trading style of MBR IT Solutions Ltd.
	Contact Us - Terms of Use - Privacy Policy - www.dotnet247.com