Cambia tipo di input

Question

Sto lavorando su un sito abbastanza dinamico e voglio che l'utente sia in grado di scegliere ciò che desidera inserire. Le scelte di input sono i vari tipi di input (testo, password, ecc.) C'è qualche stile / modo per crearlo? Pensavo che scegliessero da un menu a discesa e poi Javascript si occupasse del resto. Ma penso che ci debba essere un modo consolidato per affrontare questo problema che non trovo sul Web.

Grazie per l'aiuto.

Answer 1

In Javascript, dovresti creare un input come segue.

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

Quindi, se si desidera creare input al volo, è possibile creare un menu a discesa che elenchi i tipi di input come stringhe (pulsante, testo, ecc.). Quindi, una volta che l'utente ha scelto la stringa nel menu a discesa, la passeresti a una funzione Javascript come la seguente:

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

Quindi, se si desidera aggiungere l'input a un elemento nella pagina con id 'pippo':

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

Se desideri iniziare con un div sulla pagina, immagina di avere un tag div con id foo sulla pagina:

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

Quindi, quando l'utente sceglie un elemento, cancella il div e inserisci un nuovo input:

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

Inizialmente ho risposto alle tue domande in questo modo:

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

Ma poi ho controllato e non ha funzionato in IE ... o ovviamente. (Funziona meravigliosamente in Safari) Quindi ho trovato questo fantastico link qui:

http: // www .universalwebservices.net / web-programmazione-risorse / javascript / cambio-input-elemento-tipo-usando-javascript

Spero che questo aiuti!