Modifier le type d'entrée

Question

Je travaille sur un site assez dynamique et je souhaite que l'utilisateur puisse choisir ce qu'il veut saisir. Les choix d'entrée sont les différents types d'entrée (texte, mot de passe, etc.) Y at-il un style/moyen de créer cela? Je pensais qu'ils choisissaient dans un menu déroulant et que Javascript s'occupait du reste. Mais je pense qu'il doit y avoir une façon établie de faire face à ce que je ne trouve tout simplement pas sur le web.

Merci pour toute aide.

Answer 1

En Javascript, vous devez créer une entrée comme suit.

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

Donc, si vous voulez créer des entrées à la volée, vous pouvez créer un menu déroulant qui répertorie les types d'entrées sous forme de chaînes (bouton, texte, etc.). Ensuite, une fois que l'utilisateur a choisi la chaîne dans le menu déroulant, vous passeriez à une fonction Javascript comme suit:

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

Ensuite, si vous vouliez ajouter l'entrée à un élément sur la page avec id ' foo ':

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

Si vous souhaitez commencer par un div sur la page, imaginez que vous avez une balise div id toto sur la page:

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

Ensuite, lorsque l'utilisateur choisit un article, clair la div et faire une nouvelle entrée:

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

Je lui ai répondu à vos questions à l'origine comme ceci:.

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

Mais j'ai vérifié et il ne fonctionne pas dans IE ... ou bien sûr (il Ne fonctionne à merveille dans Safari) donc j'ai trouvé ce grand lien ici:

http://www.universalwebservices.net/web-programming-resources/javascript/change-input-element-type-using-javascript

Hope this helps!