Internet Explorer unterstützt keine Änderung von type bei Input-Feldern per JavaScript

Manchmal kommt es vor, dass zur Eingabe von Passwörtern oder zum Verschicken von Formulardaten ein Input-Text-Feld dynamisch in ein Passwortfeld (type=”password”) oder ein Hidden-Feld (type=”hidden”) geändert werden muss. Leider unterstützt der Internet Explorer in allen Versionen die Änderung von “type” per JavaScript nicht. Also folgendes ist im IE nicht möglich:

Ein Workaround ist es, das Feld per JavaScript zu entfernen und mit den gleichen Attributen neu zu erstellen. Hierzu kann man eine Funktion nach folgendem Schema verwenden:

function changeInputType(oldObject, Type) {
  var newObject = document.createElement('input');
  newObject.type = Type;
  if(oldObject.size) newObject.size = oldObject.size;
  if(oldObject.value) newObject.value = oldObject.value;
  if(oldObject.name) newObject.name = oldObject.name;
  if(oldObject.id) newObject.id = oldObject.id;
  if(oldObject.className) newObject.className = oldObject.className;
  oldObject.parentNode.replaceChild(newObject,oldObject);
  return newObject;
}

In unserem Beispiel von oben würde das dann so funktionieren: