Skip to content

@bminer /changeTypeAttr.js

Embed URL


Subversion checkout URL

You can clone with
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'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;

Object "HTMLInputElement" has no method 'prop'?


@TKluge It requires the jQuery library.


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


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


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.


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.