Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Cross-browser solution for changing the 'type' attribute of an `<input/>` tag.
/* x is the <input/> element
type is the type you want to change it to.
jQuery is required and assumed to be the "$" variable */
function changeType(x, type) {
if(x.prop('type') == type)
return x; //That was easy.
try {
return x.prop('type', type); //Stupid IE security will not allow this
} catch(e) {
//Try re-creating the element (yep... this sucks)
//jQuery has no html() method for the element, so we have to put into a div first
var html = $("<div>").append(x.clone()).html();
var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
//If no match, we add the type attribute to the end; otherwise, we replace
var tmp = $(html.match(regex) == null ?
html.replace(">", ' type="' + type + '">') :
html.replace(regex, 'type="' + type + '"') );
//Copy data from old element
tmp.data('type', x.data('type') );
var events = x.data('events');
var cb = function(events) {
return function() {
//Bind all prior events
for(i in events)
{
var y = events[i];
for(j in y)
tmp.bind(i, y[j].handler);
}
}
}(events);
x.replaceWith(tmp);
setTimeout(cb, 10); //Wait a bit to call function
return tmp;
}
}
@TKluge

Object "HTMLInputElement" has no method 'prop'?

@adammessinger

@TKluge It requires the jQuery library.

@RaphaelDDL

To stop the has no method 'prop', just add x = $(x); before if(x.prop('type') == type). At least in my problem, that fixed and x started working like a jQ object (and so, prop works).

@jiraiyame

Pretty cool! There has the example used this gist on codepen, the reason why i am here.

@a-r-d

Thanks for making this. You should put a "var" in front of the loop variable "i" and "j" btw. They are global in this snippet without it.

@espellcaste

Agree! Jshint gives some errors without the var in front of the loop variable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.