Instantly share code, notes, and snippets.

Embed
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
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

This comment has been minimized.

Show comment
Hide comment
@TKluge

TKluge Feb 1, 2013

Object "HTMLInputElement" has no method 'prop'?

TKluge commented Feb 1, 2013

Object "HTMLInputElement" has no method 'prop'?

@adammessinger

This comment has been minimized.

Show comment
Hide comment
@adammessinger

adammessinger Feb 22, 2013

@TKluge It requires the jQuery library.

adammessinger commented Feb 22, 2013

@TKluge It requires the jQuery library.

@RaphaelDDL

This comment has been minimized.

Show comment
Hide comment
@RaphaelDDL

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

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

@jiraiyame

This comment has been minimized.

Show comment
Hide comment
@jiraiyame

jiraiyame Jun 25, 2014

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

jiraiyame commented Jun 25, 2014

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

@a-r-d

This comment has been minimized.

Show comment
Hide comment
@a-r-d

a-r-d 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.

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.

@espellcaste

This comment has been minimized.

Show comment
Hide comment
@espellcaste

espellcaste Mar 1, 2015

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

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