Disable Button click, ImageButton click and/or form submit on Enter Keypress

By default, if you press enter in any textbox, the default button specified for that Panel or form etc. gets fired automatically. Even if no default button is specified, the first button or ImageButton gets clicked. This is ok in most of the situations where we want to submit the form or want the buttons/imagebuttons to get clicked. But in some cases you don’t want any Button to get clicked when you press enter in any textbox and that’s a problem. For asp.net Button controls you can simply set the UseSubmitBehavior="False" and get away with them. But I could not find any similar property of ImageButton control to stop it from getting clicked.

The Problem

Prevent any button or imagebutton from getting clicked when you press enter anywhere in the browser window, though you still want their click events to get fired when you click them with the mouse or navigate & click using keyboard etc.

In my case, I had some buttons and imagebuttons that shows some popup windows when clicked. But the problem was that if I pressed enter on any of my textboxes, a popup window just popups up which is annoying because we didn’t really click the related button/imagebutton.

The Solution

One way (which works only if you have buttons and no imagebuttons on your form) is to set UseSubmitBehavior="False" for all the buttons. If there are too many buttons on your form or you want to do conditionally, this function may be handy.

'Call the function in form load or other appropriate event like this
DisableEnterKeyPress(Me)

Private Sub DisableEnterKeyPress(ByVal control As Control)
    For Each ctl In control.Controls
        If ctl.HasControls Then
            DisableEnterKeyPress(ctl)
        ElseIf TypeOf ctl Is Button Then
            ctl.UseSubmitBehavior = False
        End If
    Next
End Sub

But unfortunately that didn’t work for me because I had ImageButtons too on my form; and ImageButtons have no built in way to disable that behavior. I tried trapping the onkeypress / onkeydown events of the ImageButtons but that doesn’t work either.

After failing in one way or the other using straight forward code, this idea stuck me. Open-mouthed smile

So this is more of a workaround than straight code but should work in almost all cases. And this solution works for both Buttons as well as ImageButtons or a mixture of them as in my case.

Insert this inside your <form></form> tags, but before any Buttons or ImageButtons. To be sure that it will always work, I inserted it just immediately after the <form> begin tag.

<form id="form1" runat="server"> 
<input type="submit" style="position:absolute;left:-100px;top:-100px;width:0px;height:0px;"
       onclick="javascript:return false;" /> 
<!-- other form controls below this line -->


</form>

That’s just a sweet simple one liner. Isn’t it? Hot smile

How this Works

By now you must have already understood the trick and why I did what I did. Open-mouthed smile

We insert an html input button before any other buttons on the form. So this becomes the first button on the form and when enter is pressed in any textbox, this button’s click event will be fired. But in the click event we just ignore it by returning false and preventing form submit.

An asp.net button would have also done equally good. But we don’t want this dummy button in the code behind. It serves no purpose there and may instead add to the confusion there. So we are content with just an html input submit type button, which is invisible on the screen because of the style we set there.

Advertisements

13 Responses to “Disable Button click, ImageButton click and/or form submit on Enter Keypress”

  1. Siddharth Rout Says:

    This trick is so cooooooooooool!!!!

    I was struggling with this for the last 2 weeks and didn’t know what to do!

    Thanks a lot for this simple solution.

    Sid

  2. HellBond0007 James Bond of Hell Says:

    this code is very usefull for everone

    thanx a lot

  3. john Says:

    Great solution very simple and helpful indeed

  4. Abe Says:

    This solution was simply SWEEET!!… Thanks

  5. vijay Says:

    thanks a lot.

  6. FWD Says:

    Brilliant, thanks. 🙂

  7. Dennis Says:

    Very very brilliant!!!!! How good is your imagination!

  8. Jamin Says:

    Respect !!

  9. Kanchan Says:

    It works for me
    thank you!!!

  10. Oliver Says:

    Damn simple work-around to a very annoying problem, thank you!

  11. alan2000 Says:

    Best workaround I’ve seen. Added this to the master page, works as expected, and doesn’t interfere with text fields that are used as lookups.

  12. Ricky Says:

    Very good. You save my day! Thx


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: