Focus in asp.net with javascript

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

psion - 25 Mar 2008 16:21 GMT

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">

</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

Reply to this Message

Anthony Jones - 25 Mar 2008 18:22 GMT

> Hi,
> I am trying to set focus to a specific button in a server form when
[quoted text clipped - 49 lines]
> Is there an easier way to accomplish this task?
> Is there an error in the code that causes the IE behavior?

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");

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

psion - 25 Mar 2008 20:30 GMT

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.

Reply to this Message

Anthony Jones - 26 Mar 2008 00:06 GMT

> Thank you for your reply.
> After applying the code example as posted, IE 7 reports a stack
> overflow error, and FF does not work.

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.

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

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.

The problem with keydown is it is more prone to fire repeatedly.

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

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.

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

psion - 26 Mar 2008 21:42 GMT

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

Reply to this Message

Rate this thread:

Focus in asp.net with javascript

Free Magazines