Oliver Nassar

IE6 and input type changes: short answer, ie6 sucks, long answer:

October 10, 2009

The Problem

I ran into another problem the other day native to ie6 (well ie7 and ie8 too, to be fair) where by I was trying to dynamically change a text input field from type="text" to type="password". Safari, chrome and firefox had no issues. It was a simple as node.type = 'password', or since I was using MooTools, node.set('type','password'). Resolved. But wait...

Then I ran into IE6, whereby I got a nice "This command is not supported.". It took me a while to figure this out. At first I thought the node didn't have MooTools 'set' method for some reason (didn't access it right?), but once I found out the reason, I looked for workarounds. None really. Other resolutions that attempted completely different code, but no workaround for IE6 specific to change the type. It seemed Microsoft had decided that an input field's type should not be able to change after it'd been loaded. I'll get to that in a second

My Resolution

Spit out password fields on the page for when it gets sent back to the client. When the DOM has loaded, iterate over the input[type=password] fields (I did this via the MooTools selector node.getElements('input[type=password')), make them hidden (via add a class or adjusting it's style property), and make a new node that has an input type with the text value. I added the same classes to it as the password node had. When a user focused on the field (the text one that was originally a password field), I destroyed it, and removed the hidden class.

What really bothered me

"This is an expected behavior. One can't change the type of an INPUT element once it is already created and became part of the DOM. The behavior is documented below in the Remarsk Section:"

That was microsoft's response in their developer forums. That was last year, and instead of addressing it as an issue and complying with a standard, they were stubborn and basically refuted the claim as a bug. I'm not sure how I feel about the standard. I understand why an input type is set after the DOM has been loaded. I can't change a tag type from div to span after the fact (or at least I shouldn't be able to). Ideally, in my own head that is, every input type should have a separate tag value. <button />, <select />, <file />, <text />, <textarea /> and <password />. I think that'd be ideal, and save a lot of confusion.

Either way, that's my resolution. M$ response is kind of sucky, but what can ya do.