ASP.net ButtonClick events not fired when "Enter" is hit?

In Internet Ignorer (AKA Internet Explorer for you purists)... You know that browser by MICROSOFT? The same dudes who came up with ASP.net? You may have noticed that a form submittal event that is fired by the enter key doesn't call the form's _Click event.

This only happens with a single TextBox control for example the code below:


<form runat="server">
Name: <asp:TextBox runat="server" id="txtField" />
<asp:Button runat="server" Text="Go" />
</form>


Internet Ignorer does not pass the submit button's name/value pair in the post. Therefore the ASP.net engine can't determine what control fired the postback event and therefore can't fire the appropriate Click event.

To get round this simply add another TextBox control to your form for example:


<form runat="server">
Name: <asp:TextBox runat="server" id="txtField" />
<asp:Button runat="server" Text="Go" />
</form>
>asp:TextBox runat="server" style="display:none;" /<


For some strange reason INternet Ignorer now decides to send the name value pairs along to the post event.

Yet ANOTHER workaround for a Microsoft product... When using a Microsoft technology... Does it get worse than this? :-)

Accessibility and JavaScript Mouse Events

One of the most annoying things as a fellow developer trying to get his sites to pass accessibility checks is the "Make sure event handlers do not require use of a mouse" pass - which seems like an unavoidable scenario… I.e. you want something to happen when the user clicks the mouse… Nothing unreasonable there? Except when the user doesn’t have a mouse that is!

So we need a solution for those users too...

<input type="text" id="forename" onclick="this.value='';" onkeypress="this.value='';" />

Mmmm there's my first problem – I can’t simply add an onkeypress event as it would wipe out everything as I type… Not very user friendly.

Being lazy I was obviously annoyed at this as it meant I had to think about how to make this action accessible for all users…

Here’s a messy version of something that worked in my scenario:

<script>
<!--
function clearText(obj){
var defaultValue="DEFAULT VALUE";
if(obj.value==defaultValue){
obj.value="";
}
}
//-->
</script>

<input type="text" id="first_name" onclick="clearText(this);" onkeypress="clearText(this);" value="DEFAULT VALUE" />


It's messy but it does solve the problem and my page successfully got a WCAG priority 2.. AKA "a pass".

The point is you have to offer a solution to all of your users, not just those with a mouse. So next time you type that fatal line of code: onclick, remember those people who can't use a mouse.

I guess that is the concept of accessibility after all – allowing everyone to use your website!