jQuery swap text field for password field not working in IE8

Question

In a login form in my web application, I'm using jQuery to swap a text field for a password field once it gains focus. It's working everywhere except in IE8 (and, I'm assuming, below -- though I haven't checked.)

var originalField = $(this);          // Original field
var newField = $(this).clone();       // New field, cloned from the old one
newField.attr("type", "password");    // Change the new field's type to password
newField.insertBefore(originalField); // Insert the new field
originalField.remove();               // Remove the old one
newField.attr("id", "password");      // Give new field the id "password" (for CSS)
newField.select();                    // Bring focus to the new field

Thoughts?

EDIT: Sorry I didn't specify, but "not working" in IE means that the field simply isn't getting replaced. When I type in the password field in IE, I can read its contents.

EDIT 2: Here's the fiddle with the HTML and the JS: http://jsfiddle.net/franktisellano/v5D9W/3/

Answer 1

IE8 doesn't allow you to change the type of an input. You get an error like this in the Dev Tools Error: This command is not supported.<input class="custom" title=Password value="" type=password name=password placeholder="Password"> .

The jquery.placeholder plugin works around this by just creating a new element and copying attributes from the old element.

function extractAttributes(elem) {
    var attr = elem.attributes, copy = {}, skip = /^jQuery\d+/;
    for(var i = 0; i < attr.length; i++) {
        if(attr[i].specified && !skip.test(attr[i].name)) {
            copy[attr[i].name] = attr[i].value;
        }
    }
    return copy;
}

$clone = $('<input/>')
  .attr($.extend(extractAttributes(this), {type: 'text', value: placeholder, 'data-password': 1, id: cid}))
  .addClass('placeholder');

https://github.com/matoilic/jquery.placeholder/blob/master/jquery.placeholder.js#L80-L82