Instantly share code, notes, and snippets.

What would you like to do?
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'type','type') );
var events ='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);
setTimeout(cb, 10); //Wait a bit to call function
return tmp;

This comment has been minimized.

TKluge commented Feb 1, 2013

Object "HTMLInputElement" has no method 'prop'?


This comment has been minimized.

adammessinger commented Feb 22, 2013

@TKluge It requires the jQuery library.


This comment has been minimized.

RaphaelDDL commented May 3, 2013

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


This comment has been minimized.

jiraiyame commented Jun 25, 2014

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


This comment has been minimized.

a-r-d commented Aug 13, 2014

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.


This comment has been minimized.

espellcaste commented Mar 1, 2015

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