Ryan Ternier

Killer ASP.NET ninja coding monkeys do exist!

A LinkButton, DefaultButton, UpdatePanel and FireFox

What are we going to do today Brain? Today Pinky? We are going to TAKE OVER THE... learn to use the stuff in the title... 

I recently did a post regarding An UpdatePanel, FireFox and the Default button. One thing that has stumped many ASP.NET Developers is... what about the @#%)&* Linkbutton! I can click it... but I WANT TO PRESS ENTER!

As more and more websites are becoming more visual appealing the "button" is getting it's due and is being chucked off of the 50th story window and smashing into all those ugly cars on the ground. So what can we use instead? An image button is great, but it has design issues that are hard to get out of.

A LinkButton is a great tool. It renderes as an anchor (<a ... />) tag, and you can add some funky CSS style to it. Later today I'll be updating my projects site with some examples on building some very COOL linkbutton's.

So, how do we get the link button to actually do something useful when someone presses enter?

So here we go. Let's start off with some script:

 

    <script type="text/javascript">

        function keyPress(evt)

        {

            if(evt.which || evt.keyCode)

            {

                if((evt.which == 13) || (evt.keyCode == 13))

                {

                location =    document.getElementById('<% =btnLogin.ClientID %>').href;

                return false;   

            }

                return true;

            }

        }

 

    </script>

Key 13 is the Key code for the enter button. So whenever this function is called, and the KeyCode is 13 (my enter button), change the location of this document. Note that location is not a variable, changing that will redirect the browser.

We also need to return false. Why? Whenever a link button is activated through.. "enter" it will just refresh the form. Ohhh, just like the button in FireFox. Yes Pinky.. just like that.  Remember that the <asp:linkButton /> gets rendered as an anchor tag... so what does the anchor tag NOT have? a Click event. Remember default buttons fire a click event, which is how they work - seeing an Anchor tag does not have this, this won't work. The form is just submited without the __EVENTTARGET parameter.

There is one solution that creates their own "click" event for the LinkButton. You can look at it here (this solution does work as well, i just found it too much). I wanted something simpler, Simple is key.

Ok back on track.

Our JavaScript is called via the keypress on textboxes(<input type="text />) or textareas.  We need to add the folowing to each textbox/textarea we have.

 

<asp:TextBox ID="txtUserName" runat="server" SkinID="DataEntryTextBox" onkeydown="keyPress(event);" />

So everytime someone presses a key in this box, it will fire our client side function.

And... that's it.

There are a few drawbacks to the solution I have presented.

  1. If you're page has multiple buttons / imagebuttons on it, without careful checking those buttons will be "invoked" before yours is. You will have to do a bit of extra scripting to make sure that doesn't happen.
  2. You have to add the onkeydown event listener to every textbox / text area.
And that's it.  If you have any questions please let me know.


 


Comments

Denny Ferrassoli said:

Along the same lines (roughly) I wanted a textbox which would automatically call a client-side function after the user was finished typing so I could submit the form. Well it's somewhat difficult to determine if the user has truly finished typing but I figured wait a few milliseconds and see if the text changed. If it has not changed then they probably finished typing...

Anyways I created a jQuery addon that does just that. It's called TypeWatch. It's my attempt at eliminating the "submit button." Now it wouldn't apply to all situations seeing that you have to specify a "timeout" value... so after 750ms of the text not changing it's considered finished. I used this mainly on my search page.

I did a bit of usability testing and found that usually people who are aware that the submit button is gone will just press "Enter."

Anywho, just thought I would share, thanks :)

# October 25, 2007 3:32 PM

Ryan Ternier said:

Nice idea. you can also look at the onBlur even. If someone clicks off of an element, Blur will be raised - allowing you to do more too :)

# October 25, 2007 4:24 PM

Gavin Harriss said:

Thanks so much for sharing the LinkButton solution - much appreciated :) And thanks for dropping me a mail to let me know.

I find your solution works well, however I am indeed falling prey to an ImageButton on my page getting invoked as you mentioned might happen at the end of your post. I'm very confused as to why other ImageButtons / Buttons on the page would get invoked so am not sure how to proceed coding around this scenario. Do you have any pointers on where to begin looking / coding to get around this problem?

# October 25, 2007 8:18 PM

Martin said:

Thanks. Thanks. Thanks. Helped me very much!

# November 8, 2007 2:49 AM

wolszakp said:

Thanks. Helped.

# January 24, 2008 5:48 PM

kamii47 said:

Thanks Ryan.

# April 24, 2008 4:04 AM

Manu Maindola said:

Thanks Ryan.

That was really helpful. You saved my time. good going...!!!!

# May 27, 2008 2:47 AM

kamal said:

not working for update panel

# June 17, 2008 7:14 AM

Matt said:

Is there any reason why this doesn't work with FireFox 3?

# December 22, 2008 3:59 PM

Johan Buret said:

Another solution is to define the "click()" method on DOM Anchor Elements. This work under Firefox and doesn't break IE.

//BEGIN Javascript CODE

if (typeof(HTMLAnchorElement) != "undefined" )

{

   HTMLAnchorElement.prototype.click = function()

   {

       window.location = this.href;

   }

}

//END Javascript CODE

You need to apply it in every page and you're done. No need to take care of every single textbox.

# March 11, 2009 5:30 AM

Ryan said:

This is submitting my form twice in IE and doesn't work at all in Firefox.

# April 21, 2009 11:58 PM

HSharma said:

Thank you so much its work very well

# October 6, 2009 6:46 PM

Holger_dk said:

I think a simpler solution is to have a asp:Button control that does the same as your link button but has the css property display set to none (can be done in codebehind with: "control.Style.Add(HtmlTextWriterStyle.Display, "none");" )

though ofc then you have an extra button on the page etc.

# November 16, 2009 10:25 AM

nguyenvinh0312 said:

very good and useful, thanks

# July 13, 2010 4:35 AM

BrendanOSull said:

Hi...

FYI, the logic behind this is really simple and all should work a treat, however, I found it didn't work on my form. A button in the template kept overriding things for some reason. Can't quite work out why...

I did however come up with a cheat. Not elegant but works great.

If underneath your linkbutton you put an asp:Button control with an id of say, "btnHiddenDefault". Set it's onclick handler to the same method as your link button. Set it's cssclass property to a css class with a display of none. Finally set the containing panels defaultbutton to be btnHiddenDefault.

This cheat basically results in a hidden button in the panel that does exactly what the linkbutton does but which is only used by the defaultbutton attribute of the form.

Brendan.

# August 16, 2010 8:34 AM