javascript - Comportamiento extraño cuando el elemento de entrada cambia el tipo a oculto

Descubrí un comportamiento extraño de los elementos de texto de entrada/ocultos y me gustaría saber por qué sucede esto.

Tengo un cuadro de texto de entrada que tiene un valor, digamos "test". Borro el valor del elemento de entrada y cambio el tipo de este elemento a "hidden". ¡Si ahora lo cambio de nuevo a "text" el valor original sigue ahí! Si no borras completamente el valor del elemento de texto pero lo cambias, tus cambios se conservan. ¿Por qué, si borras el valor del elemento, este cambio no se conserva?

Creé un fiddle que puede mostrarte lo que quiero decir.

function toggler() {
  var iobj = document.getElementById('test');
  if (iobj.type == 'text') {
    iobj.type = 'hidden';
  } else {
    iobj.type = 'text';
  }
}

<button name="toggle" type="button" onclick="toggler()">Toggle</button><br /><br />
<input type="text" name="test" id="test" value="sample" />

Respuesta #1

Esto tiene que ver con cómo diferentes navegadores manejan la propiedad defaultValue de los inputs, cada vez que se cambia su type. En este caso, cuando se cambia el type del input y el .value está vacío, Firefox utiliza el último valor no vacío como propiedad .defaultValue del input. Cuando el tipo se cambia a text, Firefox usa la propiedad .defaultValue para establecer la propiedad .value actual del input. Chrome no hace esto, es decir, utiliza el último valor, esté vacío o no, como .defaultValue.

Aquí hay una demostración en jsfiddle. Comparando los valores registrados en la consola de Firefox y Chrome, debería demostrar los diferentes comportamientos.

También debería mencionar que, según mi experiencia/conocimiento, Firefox cumple más con los estándares que otros navegadores.

Dicho esto, cambiar el tipo de un input nunca ha sido una buena idea. Los elementos de formulario son muy diferentes y los navegadores manejan el caso de diferentes maneras.