ajouter dynamiquement des éléments de jquery ou javascript

Question

si un utilisateur tape dans une entrée dire 3 dans une zone de texte trois petites zones de texte doivent être affichées ci-dessous ou dans un popup via javascript ou jquery .Comment cela peut-il être fait ...

<input type="text" name="order">3</input> 

Merci ..

Answer 1

Gardez à l'esprit que vous devriez probablement masquer la zone de texte pour permettre uniquement les entrées numériques ... Ou peut-être utiliser une liste déroulante avec une liste de numéros pour prévenir toute erreur. Mais here est un excellent plugin de masque jquery pour éviter les entrées non numériques.

<input type="text" name="Order" onKeyDown="checkVal(this)">3</input> 

<div id="myDiv"> 
</div> 


function checkVal(ctrl){ 
    var val = ctrl.value; 
    $('myDiv').html(''); // remove existing elements 
    for (i=0;i<parseInt(val,10);i++){ 
     $('#myDiv').append('<input type="text" />'); 
    } 
} 

Answer 2

Donnez le <input/> un id ' "ordre", il est aussi simple que:

var order = $('#order'), 
    container = $('<div/>').insertAfter(order); 

order.keyup(function(){ 
    container.html(
     Array(Math.abs(~~this.value) + 1).join('<input/>') 
    ); 
}); 

Pour votre information, ~~ (double bit-non) a pour effet d'obtenir le numéro de représentation de tout tapez (en utilisant l'opération interne toInt32) et ensuite le plancher. Par exemple:

~~'2'; // => 2 
~~'2.333'; // => 2 
~~null; // => 0 

Et Math.abs est de protéger contre les valeurs négatives, qui renvoie une erreur si elle est adoptée à Array().

DEMO: http://jsbin.com/azexa4