Cambiar tipo de entrada

Question

Estoy trabajando en un sitio bastante dinámico, y quiero que el usuario pueda elegir lo que quiere ingresar. Las opciones de entrada son los diversos tipos de entrada (texto, contraseña, etc.) ¿Hay algún estilo / forma de crear esto? Estaba pensando que eligen un menú desplegable y luego Javascript se encarga del resto. Pero creo que debe haber una forma establecida de lidiar con esto que simplemente no estoy encontrando en la web.

Gracias por cualquier ayuda.

Answer 1

En Javascript, crearía una entrada de la siguiente manera.

var input = document.createElement('input');
input.type = 'button';
...

Entonces, si desea crear entradas sobre la marcha, puede crear un menú desplegable que enumere los tipos de entradas como cadenas (botón, texto, etc.). Luego, una vez que el usuario haya elegido la cadena en el menú desplegable, la pasaría a una función Javascript como la siguiente:

function createInput(type) {
  var input = document.createElement('input');
  input.type = type
  ...
  return input;
}

Entonces, si desea agregar la entrada a un elemento en la página con la identificación 'foo':

var input = createInput('button');
var appendToThis = document.getElementById('foo');
appendToThis.appendChild(input);

Si desea comenzar con un div en la página, imagine que tiene una etiqueta div con id foo en la página:

<div id=foo><input type=text></div>

Luego, cuando el usuario elige un elemento, borre el div y realice una nueva entrada:

function whenUserChoosesAType(type) {
  var div = document.getElementById('foo');
  rac(div);
  var input = document.createElement('input');
  div.appendChild(input);
}      

//abbreviated function to clear the contents of a DOM element such as a div
function rac(elem) {
  while(elem.hasChildNodes()) elem.removeChild(elem.firstChild);
}

Answer 2

Originalmente respondí tus preguntas de esta manera:

<input type="text" id="changingInput">
<input type="button" value="Click Here For Example Of Changing" onclick="javascript:document.getElementById('changingInput').type = 'password';">

Pero luego lo comprobé y no funcionó en IE ... o por supuesto. (Funciona maravillosamente en Safari) Así que encontré este excelente enlace aquí:

http: // www .universalwebservices.net / recursos-de-programación-web / javascript / change-input-element-type-using-javascript

¡Espero que esto ayude!