Focus in asp.net with javascript

  • Thread starter Thread starter psion
  • Start date Start date
P

psion

Hi,
I am trying to set focus to a specific button in a server form when
typing in a specific text box and pressing enter.
For example, pressing enter in the search box at the top of the page
is to activate the submit search button next to it.
The login text box below it is to submit the login button when enter
is pressed.

The following code works in firefox 3, opera 9, and safari 3. IE 7 and
8 both have problems.
In IE, whenever a text box is clicked, and enter is pressed, the
correct button is fired. However, when I begin typing in that text
box, the top most button is fired.

The code I am using is below.
In the .aspx page, I have:
*************************************

<script language="javascript">
<!--
//FOCUSING
var toSubmit = "btnLogin";

function setSubmit(x){
if (x==1){
toSubmit = 'btnLogin';
}else if (x==2){
toSubmit = 'btn_tn_search';
}else{
toSubmit = 'none';
}
}
function goSubmit(){
if (toSubmit != 'none')
document.getElementById(toSubmit).click();
return false;
}

//-->
</script>
<body id="body1" runat="server" onkeydown="if(event.keyCode == 13)
{goSubmit();}">

*************************************
in the code behind class, I have:
*************************************
Me.txtUser.Attributes.Add("onfocus", "javascript:setSubmit(1);")
Me.txtSearch.Attributes.Add("onfocus", "javascript:setSubmit(2);")


*************************************


Is there an easier way to accomplish this task?
Is there an error in the code that causes the IE behavior?

Thank you in advance,
Krzysztof
 
psion said:
Hi,
I am trying to set focus to a specific button in a server form when
typing in a specific text box and pressing enter.
For example, pressing enter in the search box at the top of the page
is to activate the submit search button next to it.
The login text box below it is to submit the login button when enter
is pressed.

The following code works in firefox 3, opera 9, and safari 3. IE 7 and
8 both have problems.
In IE, whenever a text box is clicked, and enter is pressed, the
correct button is fired. However, when I begin typing in that text
box, the top most button is fired.

The code I am using is below.
In the .aspx page, I have:
*************************************

<script language="javascript">
<!--
//FOCUSING
var toSubmit = "btnLogin";

function setSubmit(x){
if (x==1){
toSubmit = 'btnLogin';
}else if (x==2){
toSubmit = 'btn_tn_search';
}else{
toSubmit = 'none';
}
}
function goSubmit(){
if (toSubmit != 'none')
document.getElementById(toSubmit).click();
return false;
}

//-->
</script>
<body id="body1" runat="server" onkeydown="if(event.keyCode == 13)
{goSubmit();}">

*************************************
in the code behind class, I have:
*************************************
Me.txtUser.Attributes.Add("onfocus", "javascript:setSubmit(1);")
Me.txtSearch.Attributes.Add("onfocus", "javascript:setSubmit(2);")


*************************************


Is there an easier way to accomplish this task?
Is there an error in the code that causes the IE behavior?
Click to expand...

Are these buttons marked as type="Submit" or type="button"?
Do they cause navigation/posting?
Why not use onkeyup?
Does FF3 have an event object? I don't think it does unless Mozilla have
added on recently, certainly FF2 doesn't.

Try this:-

<script type="text/javascript">

function onkeyup(ev)
{
var keyCode = ev ? ev.keyCode : event.keyCode
if (keyCode == 13)
{
var target = ev ? ev.target : event.srcElement
var btnID = target.getAttribute("enterButtonID")
if (btnID)
{
document.getElementById(btnID).click()
if (event) event.returnValue = false
return false;
}
}
}
</script>

<body runat="server" onkeyup="onkeyup.apply(this, arguments);">


//Code behind
Me.txtUser.Attributes.Add("enterButtonID", "btnLogin");
Me.txtSearch.Attributes.Add("enterButtonID", "btn_tn_search");
 
Thank you for your reply.
After applying the code example as posted, IE 7 reports a stack
overflow error, and FF does not work.
To answer your questions:

-Are these buttons marked as type="Submit" or type="button"?
+the buttons are marked as "submit" buttons.

-Do they cause navigation/posting?
+I don't know how to answer this. I do know they are submit buttons
for a form with runat=server, and the buttons themselves are
asp:textbox'es

-Why not use onkeyup?
+The code I am using was provided from another tuturial.

-Does FF3 have an event object?
+I don't know this answer.

Thank you for your help.
 
psion said:
Thank you for your reply.
After applying the code example as posted, IE 7 reports a stack
overflow error, and FF does not work.
Click to expand...

Oops bad choice of function name change onkeyup function to body_onkeyup.

Also ev.keyCode might need to be ev.which

I'll do some testing when I get the chance

To answer your questions:

-Are these buttons marked as type="Submit" or type="button"?
+the buttons are marked as "submit" buttons.
Click to expand...

So the form is posted the page reloaded?
-Do they cause navigation/posting?
+I don't know how to answer this. I do know they are submit buttons
for a form with runat=server, and the buttons themselves are
asp:textbox'es
Click to expand...

They will be posting if the containing form has an action attribute (you can
see if it does using view source)
-Why not use onkeyup?
+The code I am using was provided from another tuturial.
Click to expand...

The problem with keydown is it is more prone to fire repeatedly.
-Does FF3 have an event object?
+I don't know this answer.
Click to expand...

No it doesn't but on thing I didn't know is that event is found in the scope
chain when executing code in HTML event attribute. So thats ok.
 
Hi Anthony,
After applying the changes, neither IE7 nor FF3 work.
To answer your question:
-So the form is posted the page reloaded?
+Yes, the form is posted and reloaded.

The original code works with some minor changes. Here is a solution
that seems to work in both IE7:


~login aspx
****************************************
//FOCUSING
//var toSubmit = "btnLogin";
var toSubmit = null;

function setSubmit(x){
if (x==1){
toSubmit = "btnLogin";
}else if (x==2){
toSubmit = "btn_reminder";
}else if (x==3){
toSubmit = "btn_tn_search";
}else{
toSubmit = "none";
}
}
function goSubmit(){
//if (toSubmit != "none")
document.getElementById(toSubmit).click();
return false;
}

<body id="body1" runat="server" onkeyup="if((event.which &&
event.which == 13) || (event.keyCode && event.keyCode == 13))
{goSubmit();}">
<form id="frmindex" method="post" runat="server"
onsubmit="if((event.which && event.which == 13) || (event.keyCode &&
event.keyCode == 13)){goSubmit();}">

~login vb
****************************************
Me.txtUser.Attributes.Add("onfocus", "javascript:setSubmit(1);")
Me.txtPass.Attributes.Add("onfocus", "javascript:setSubmit(1);")
Me.txt_reminder.Attributes.Add("onfocus", "javascript:setSubmit(2);")



NOTE: A slight change has to be made in the above code for FF3 to
work. The onkeyup -> onkeydown only for body tag:
<body id="body1" runat="server" onkeydown=

Thanks for your help.
Krzysztof
 
Back
Top