динамически добавлять элементы из jquery или javascript

Question

, если пользователь вводит, скажем, 3, в текстовое поле, три маленьких текстовых поля должны быть показаны ниже или всплывающим окном через javascript или jquery. Как это можно сделать ...

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

Спасибо ..

Answer 1

Дайте <input/> идентификатор "заказа", тогда это просто:

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

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

FYI, ~~ (двойное-битное-нет) имеет эффект получения числового представления любого типа (используя внутреннюю операцию toInt32) и последующего его получения. Например:

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

И Math.abs предназначен для защиты от отрицательных значений, которые выдают ошибку, если переданы Array().

ДЕМО: http://jsbin.com/azexa4

Answer 2

Имейте в виду, что вы, вероятно, должны маскировать текстовое поле, чтобы разрешить ввод только числовых значений ... Или, возможно, использовать выпадающий список со списком чисел, чтобы избежать ошибок. Но здесь - отличный плагин маски jquery для предотвращения нечисловых записей.

<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" />');
   }
}