bug 173 - form field focus issues in Safari

Issue: #173
Affects: Safari 3.1 (Win), {Safari 3.1 (Mac)?}

As more and more applications go online in this Web 2.0 world, interactions with forms are critical to an applications success. Safari leads the way with built-in textarea resizing but it has a major issue with form field focus.

Since data entry in forms is a crucial part of online forms, ensuring that your forms are both keyboard and mouse navigable is important. Unfortunately in Safari the keyboard navigation breaks if you use the mouse on radio or checkbox elements. This becomes a major issue because although radio and checkbox elements are keyboard accessible, in general users prefer to use the mouse to make their selection(s).

The issue is this. If you use the mouse to select a radio or checkbox field one expects that that field has the focus and thus a 'Tab' will take you to the next available field (or whatever is defined in the tabindex order). When the user presses 'Tab' in Safari, the focus resets to the first form field on the page!

If you use the mouse for other types of fields, or use only the keyboard the issue doesn't occur.

Example: (Try it out!)

First Name:
Last Name:
Email:
Life Story:
Gender:
Female
Male
Pets Name:
Spam Preferences:
Pornography (NSFW collection)
Medications (weight loss, ED, muscles)
Mortgage/Loan (impossible rates)
Religion (guilt, pressure, overtones)
Fakes (fake rolex, cartier, artwork)
Hot Stocks (buy! buy! insider info)
Pirated software (OEM, Bulk, Download)
Illegal Music/Movies (Torrents, P2P)
Surprise Me! (Scams, popup, virus)
Address Line 1:
Address Line 2:
Comments:

Known Workarounds: None.

Related Issues: (bug 132).

Bug/Site Feedback |
Submit a bug

bug 132 - slow checking checkboxes required in IE

Issue: #132
Affects: IE6, IE7

Checkboxes are the perfect form control to select multiple items. In fact they are so good, that the original element designed for this (<select multiple="multiple">) is hardly used because it is so user unfriendly.

They get used everywhere, especially in a long list of items (it could be emails, tasks in a TODO list, or picking your any number of options).

However there is a bug in IE, that forces you to make sure you pick options slowly. The bug is that if you press the Tab key, and the Space bar at the same time, the checkbox control gets "locked" in a strange state, renders "disabled", and stops any other interaction with the rest of the form, the page, the toolbars, the menu or even the window itself!

So, lets analyze this. First off, why would a user press Tab + Space on a checkbox in the first place? Well, if you want to check/uncheck a series of checkboxes quickly, you can Tab through them, and press the Space bar to toggle their status. Once you've mastered this trick, you'll find yourself using it all over the Web.


Example:


Then Tab to the checkboxes, press Space to toggle them, then press Tab and Space at the same time on one.
One
Two
Three
Four
Five
Six
Seven
Eight

Known Workarounds: None. There's no workaround for this issue from a programming perspective, but you can as an end user, press Escape to clear the lock.

Related Issues: None.


Bug/Site Feedback |
Submit a bug

bug 299 - setAttribute "checked" does not work in IE

Issue: #299
Affects: IE5, IE5.5, IE6, IE7

If you use the DOM Methods to build up new content for your page, be aware that in IE, you can't pre-check a radio button or a checkbox using .setAttribute('checked', 'checked'); or even myCheckBoxObject.checked = true; *unless* you add the element to the page first.

Example:

<script type="text/javascript">
  var cb1 = document.createElement('input');
  cb1.setAttribute('checked', 'checked');
  document.getElementsByTagName('body')[0].appendChild( cb1 );
</script>

In all other browsers, this would add the checkbox to the page, pre-checked.

Known Workarounds: Two. You can set the checked attribute after you've appended your element to the DOM (so it will flash momentarily before being checked), or, you can call cbObj.setAttribute('defaultChecked', 'defaultChecked'); which will also work.

Note, when setting the checked, or the defaultChecked attribute, any value for "true" will work.

Example Workaround Code:

<script type="text/javascript">
  var cb1 = document.createElement('input');
  cb1.setAttribute('defaultChecked', 'defaultChecked');
  document.getElementsByTagName('body')[0].appendChild( cb1 );
</script>

Related Issues: bug 235, bug 237, bug 242.

bug 193 - onchange does not fire properly on IE radio buttons and checkboxes

Issue: #193
Affects: IE5, IE5.5, IE6, IE7, IE8 Beta 1

The onchange event can be attached (inline or as an event handler) to any form element. It fires whenever the value of the form field changes. Unfortunately, the behavior is a bit strange in IE, in that for a checkbox, or a radio button field, the event doesn't fire when it is supposed to (right when you click the option you want to choose), but instead it only fires, when you click elsewhere on the page/form, or if you explicitly call blur(); on the field.

Example:

<input type="radio" name="foo" value="Green" onchange="alert(this.value);"/>Green<br/>
<input type="radio" name="foo" value="Blue" onchange="alert(this.value);"/>Blue

As soon as you click on either of these radio buttons, the alert should pop up telling you what you just selected.

Try it out!

Green

Blue

You'll notice that it works just fine in all browsers except Internet Explorer. In fact, in IE, clicking once will not pop up the alert, but clicking the other radio button will pop up the alert, but the value is the last radio button clicked.

Known Workarounds: One. Instead of using the onchange event, use the onclick event for radio and checkbox elements instead (or at least for IE)

Example Workaround Code:

<input type="radio" name="foo" value="Green" onclick="alert(this.value);"/>Green<br/>
<input type="radio" name="foo" value="Blue" onclick="alert(this.value);"/>Blue

Test this version with onclick:
Green

Blue

Related Issues: None.