bug 196 - IE9 fixes almost .setAttribute('type', value);

Issue: #196
Affects: IE9 PP4, IE9 Beta, IE9 Platform Preview 6

We're happy to say that IE9 has brought many, many improvements to Internet Explorer in terms of updating the IE engine to properly handle standards based code.

IE had issues in the past with the Element.setAttribute(name, value); method for a long time not supporting it on a wide array of elements (bug 242) of which the type attribute was a significant one (bug 237).

We were hoping that after IE9 Platform Preview 4 was released and we found that the .setAttribute('type', value); method had finally been fixed that the "new" bug with the value being erased when switching an HTMLInputElement from type "password" to "text" would have been fixed 2 public releases later.

Unfortunately it is still broken and thus we're tracking this new issue separately here.

Example:

<input type="password" id="accessCode" name="accessCode" value="bfg10k"/>
<script type="text/javascript">
  function exposeCode(){
    var field = document.getElementById('accessCode');
    field.setAttribute('type', 'text');
    //Oopsie! the value is now gone in IE9!
  }
</script>

Known Workarounds: None.

Related Issues: None.

Bug/Site Feedback | Submit a bug

bug 387 - setAttribute('type','file'); fails in Chrome & Safari

Issue: #387
Affects: IE6, IE7, IE8, IE9 Beta, Chrome 5,6,7, Safari 5
Fixed In: IE9 Platform Preview 6 (only when rendering in IE9 Standards Document Mode)

We've long known that IE has problems with both setAttribute (bug 242), and specifically changing the type attribute (bug 237) however it looks like it is Chrome and Safari that have an issue now.

It seems that in Chrome and Safari you can't set an input element's type attribute to "file". Try it out below! (It will fail in IE too of course, but that's a known issue)

Example:
filename:

Known Workarounds: None.

Related Issues: None.Bug/Site Feedback | Submit a bug

bug 366 - we call a rose by any other name would... IE JS Error?

Issue: #366
Affects: IE6, IE7

"What's in a name? That which we call a rose by any other name would smell as sweet."
- William Shakespear (Romeo and Juliet, Act II, Sc. II)

Have you ever tried to rename an input field with JavaScript just before submitting a form? Quite likely, and it works just fine... or does it?

There are times when renaming a field is easier than deleting and inserting a new one. When such a time arises, a simple:

Example:

<script type="text/javascript">
 document.forms[0].elements['rose'].name = 'flower';
</script>

Will work just fine. When you submit the page, the parameter on the GET/POST request/submission will be called "flower".

However if you plan to use JavaScript to re-access that field in IE (e.g. to perform some client side field validation), don't try to access it by name! It will work in all browsers except Internet Explorer.

Known Workarounds: None.

Related Issues: (bug 152), (bug 162), (bug 235), (bug 237), (bug 240), (bug 242), (bug 411).

Bug/Site Feedback |
Submit a bug

bug 329 - Element.setAttribute('style', '...') fails in IE8 Beta 1

Issue: #329
Affects: IE8 Beta 1
Also Affects: IE6, IE7
Fixed In: IE8 RC1

The setAttribute() method was reported fixed in IE8 (whitepaper Pg.5), however some tests have indicated otherwise.

In particular, attempting to set the 'style' attribute on an element in IE8 Beta 1 still fails as it did in IE6, & IE7.

Please note that for any IE8 related bugs, all tests are done in "IE8 Standards Mode".

Example:

<script type="text/javascript">
  var obj = document.getElementById('myObj');
  //the following call will fail in IE8 Beta 1
  obj.setAttribute('style','border:2px solid #ff0000;color:#00ff00;');
</script>

Known Workarounds: One. Although you can set: obj.style.setAttribute('cssText','...'); as outlined in (bug 245) IE8 was supposed to fix this, thus this is not an ideal workaround.

Related Issues: (bug 245), (bug 242).

Bug/Site Feedback |
Submit a bug

bug 240 - setAttribute "name" is half broken in IE

Issue: #240
Affects: IE6, IE7

Setting the name attribute of an element in IE is complicated at best (bug 242). Using .setAttribute('name', 'someValue'); will fail in IE. The name attribute is ~readonly~ and can't be modified. However interestingly enough, if you do set this, if the name was applied to a form field, IE will send the correct parameter name on the POST/GET request.

It is highly recommended that you apply some version of the (bug 235) workaround to avoid this bug in IE.

Known Workarounds: One. Use the hack in bug 235.

Related Issues: (bug 242), (bug 235)

Bug/Site Feedback |
Submit a bug

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

Issue: #299
Affects: IE5, IE5.5, IE6, IE7
Fixed In: IE8 RC1

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 245 - setAttribute "style" does not work in IE

Issue: #245
Affects: IE6, IE7

As discussed in bug 242, IE does not allow using the DOM Method .setAttribute( name, value ); for many attributes. Some just don't work, other throw errors. For the style attribute IE just ignores the request.

Example:

<script type="text/javascript">
  var myObj = docuement.getElementById('myDiv');
  myObj.setAttribute('style', 'border:1px dashed #663399;font-weight:bold;');
</script>

You can access each individual style property and set them seperately using DOM 0 techniques (Basically the IE4 way), or you can use the workaround listed below.

Known Workarounds: One. Set the style property's .cssText value when dealing with IE.

Example Workaround Code:

<script type="text/javascript">
  var myObj = docuement.getElementById('myDiv');
  //use browser sniffing to determine if IE or Opera (ugly, but required)
  var isOpera, isIE = false;
  if(typeof(window.opera) != 'undefined'){isOpera = true;}
  if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true);
  
  var styleData = 'border:1px dashed #663399;font-weight:bold;';
  if(!isIE){
    //use the correct DOM Method
    myObj.setAttribute('style', styleData);
  } else {
    //use the .cssText hack
    myObj.style.setAttribute('cssText', styleData);
  }
</script>

Related Issues: bug 242.

bug 242 - setAttribute doesn't always work in IE

Issue: #242
Affects: IE5, IE5.5, IE6, IE7
MSIE Feedback ID(s): 332453 (events)
332237 (type)
336253 (object, not a string)

336256 (cellpadding, cellspacing)
Partially Fixed in: IE8 Beta 2 (Still does not handle inline events and some developers have reported issues with certain style/class attributes not taking effect right away)


Description: When calling the DOM method .setAttribute( attName, attValue ); in IE, there are several circumstances where it will not work.
Setting the "name" attribute as mentioned (bug 235),(bug 240) does not work, the "colspan" & "rowspan" attributes for th and td tags does not work, the "frameborder" attribute on iframes does not work, nor the "cellpadding" or "cellspacing" attributes on table tags.

Setting any of the inline event attributes does not work either! therefore ALL of the following will not work:

obj.setAttribute( 'onbeforeunload', doSomething );
obj.setAttribute( 'onblur', doSomething );
obj.setAttribute( 'onclick', doSomething );
obj.setAttribute( 'onchange', doSomething );
obj.setAttribute( 'ondblclick', doSomething );
obj.setAttribute( 'onerror', doSomething );
obj.setAttribute( 'onfocus', doSomething );
obj.setAttribute( 'onmousedown', doSomething );
obj.setAttribute( 'onmouseover', doSomething );
obj.setAttribute( 'onmouseout', doSomething );
obj.setAttribute( 'onmouseup', doSomething );
obj.setAttribute( 'onkeydown', doSomething );
obj.setAttribute( 'onkeyup', doSomething );
obj.setAttribute( 'onkeypress', doSomething );
obj.setAttribute( 'onload', doSomething );
obj.setAttribute( 'onsubmit', doSomething );
obj.setAttribute( 'onreset', doSomething );
obj.setAttribute( 'onunload', doSomething );
obj.setAttribute( 'on*', doSomething );

You also can not set the "class" attribute, nor the "for" attribute, or even the "style" attribute.

Example: ...

Known Workarounds: Well there are several, and each depends on which attribute you are trying to set. The following table indicates what you can use to workaround these bugs.

• Attribute: Workaround


• acceptcharset: Use "acceptCharset"


• accesskey: Use "accessKey"


• allowtransparency: Use "allowTransparency"


• bgcolor: Use "bgColor"


• cellpadding: Use "cellPadding"


• cellspacing: Use "cellSpacing"


• checked: See note (bug 299)


• class: Use "className"


• colspan: Use "colSpan"


• defaultchecked: Use "defaultChecked"


• defaultselected: Use "defaultSelected"


• defaultvalue: Use "defaultValue"


• for: Use "htmlFor" (also note potential side issue: bug 116)


• name: None - see (bug 235),(bug 240)


• type: See note (bug 237) "type" is readonly in IE


• frameborder: Use "frameBorder"


• hspace: Use "hSpace"


• longdesc: Use "longDesc"


• maxlength: Use "maxLength"


• marginwidth: Use "marginWidth"


• marginheight: Use "marginHeight"


• noresize: Use "noResize"


• noshade: Use "noShade"


• on*: Inline events can not be set in IE, attach event handlers instead


• readonly: Use "readOnly"


• rowspan: Use "rowSpan"


• selected: When setting multiple selected items in a "select multiple" this will fail. {bug ref#TBD}


• style: None - see (bug 245), (bug 329)


• tabindex: Use "tabIndex"


• valign: Use "vAlign"


• vspace: Use "vSpace"

Example Workaround Code:

//set variable IE=true when User Agent known to be IE.
if(!IE){
  obj.setAttribute( 'class', 'special' );
} else {
  obj.setAttribute( 'className', 'special' );  
}