Problemas al cambiar el tipo de un input password con Internet Explorer

04 Oct, 2008

Problemas al cambiar el tipo de un input password con Internet Explorer

Posted by: admin In: Desarrollo

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;
}