Me he visto en la tesitura de intentar cambiar en dinámico el tipo de un input de tipo text a tipo password y viceversa.
Algo tan sencillo como hacer lo siguiente:
obj = document. getElementById('campo_password'); obj.type = 'text'; |
Todo funciona perfectamente con Firefox pero cuando lo he probado con Internet Explorer 7 el navegador me devuelve un error con el objeto y no hay manera.
He probado a realizar el cambio desde jquery para que el framework se encargara de realizar la modificación pero tampoco ha funcionado. Internet Explorer devuelve el mismo error. Grrrrrrrrrrr
Al final he encontrado este código por Internet que soluciona el problema. Hace más cosas pero seguro que un programador espabilado sabrá aislar la funcionalidad que necesite 😉
Llamandolo así convertireís el campo a tipo text donde thisInput es el objeto input
changeInputType(thisInput,'text',txtLabel,false,true); |
function changeInputType( oldElm, // a reference to the input element iType, // value of the type property: 'text' or 'password' iValue, // the default value, set to 'password' in the demo blankValue, // true if the value should be empty, false otherwise noFocus) { // set to true if the element should not be given focus if(!oldElm || !oldElm.parentNode || (iType.length<4) || !document.getElementById || !document.createElement) return; var newElm = document.createElement('input'); newElm.type = iType; if(oldElm.name) newElm.name = oldElm.name; if(oldElm.id) newElm.id = oldElm.id; if(oldElm.className) newElm.className = oldElm.className; if(oldElm.size) newElm.size = oldElm.size; if(oldElm.tabIndex) newElm.tabIndex = oldElm.tabIndex; if(oldElm.accessKey) newElm.accessKey = oldElm.accessKey; newElm.onfocus = function(){return function(){ if(this.hasFocus) return; var newElm = changeInputType(this,'password',iValue, (this.value.toLowerCase()==iValue.toLowerCase())?true:false); if(newElm) newElm.hasFocus=true; }}(); newElm.onblur = function(){return function(){ if(this.hasFocus) if(this.value=='' || (this.value.toLowerCase()==iValue.toLowerCase())) { changeInputType(this,'text',iValue,false,true); } }}(); // hasFocus is to prevent a loop where onfocus is triggered over and over again newElm.hasFocus=false; oldElm.parentNode.replaceChild(newElm,oldElm); if(!blankValue) newElm.value = iValue; if(!noFocus || typeof(noFocus)=='undefined') { window.tempElm = newElm; setTimeout("tempElm.hasFocus=true;tempElm.focus();",1); } return newElm; } |
¡Buenisima la solución! La utilice en un pequeño aplicativo que nos presentaba ese problema 🙂
Hola Esteban,
Puedes darme más detalles sobre el caso que se te presento?
Como freelance, me gusta saber en que se mueve la gente 😉
Fácil y sencillo 😛
En realidad no cambia el type, lo que hace es crear un input nuevo (var newElm = document.createElement(‘input’);) con todas las mismas características que el input que seleccionaste (newElm.type = iType;
if(oldElm.name) newElm.name = oldElm.name;
if(oldElm.id) newElm.id = oldElm.id;
if(oldElm.className) newElm.className = oldElm.className;
if(oldElm.size) newElm.size = oldElm.size;
if(oldElm.tabIndex) newElm.tabIndex = oldElm.tabIndex;
if(oldElm.accessKey) newElm.accessKey = oldElm.accessKey;), al situarte sobre el campo crea el nuevo input y lo reemplaza por este copia nueva y al salir del campo hace lo contrario, crea un campo nuevo en este caso un password y lo vuelve a reemplazar
Saludos!
MUJOT.com.ar