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