次のようにできます。
$('form input').on("propertychange keyup input paste", addInput);
function addInput() {
var remainingChars = $(this).val().length;
if (remainingChars == 24) {
$('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
}}
http://jsfiddle.net/5KZtB/
EDIT - 入力値を保存する
フィールドの値を配列に格納するには、新しいフィールドを作成する前に各値をプッシュできます。例えば、
jQuery(function($) {
var values = [];
$('form input[type=text]').change(fileChangeHandler);
function fileChangeHandler() {
var form = $(this).closest('form');
}
var form = $(this).closest('form');
$('form input').on("propertychange keyup input paste",
addInput);
function addInput() {
var remainingChars = $(this).val().length;
if (remainingChars == 24) {
$('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
values.push($(this).val());
//console.log(values);
}}
});
http://jsfiddle.net/5KZtB/1/
EDIT2 - 数値のみを許可
....
$('form input').on("propertychange keyup input paste",
addInput);
onlyNums($('form input'));
function addInput() {
var remainingChars = $(this).val().length;
if (remainingChars == 24) {
var newInput = $('<input type="text">').change(fileChangeHandler).appendTo('form').focus().on("propertychange keyup input paste",addInput);
onlyNums(newInput);
values.push($(this).val());
console.log(values);
}}
function onlyNums($elem){
$elem.keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
}
http://jsfiddle.net/5KZtB/2/
EDIT3 - 入力要素を削除するフィールド
大まかなアプローチは、スパン要素内に入力を追加し、特定の入力を削除するための x マークのリンクを追加することです。そのため、コードは次のようにわずかに変更されています。
HTML
<form>
<span class="input-component"><input type="text"/><a href=#>[x]</a></span>
</form>
JS
jQuery(function($) {
var values = [];
$('form input[type=text]').change(fileChangeHandler);
function fileChangeHandler() {
var form = $(this).closest('form');
}
var form = $(this).closest('form');
$('form .input-component input').on("propertychange keyup input paste",
addInput);
onlyNums($('form .input-component input'));
initializeDelLink($('form .input-component'));
function addInput() {
var remainingChars = $(this).val().length;
if (remainingChars == 24) {
var $newInputComponent = $('<span class="input-component"><input type="text"/><a href=#>[x]</a></span>').change(fileChangeHandler).appendTo('form').find('input').focus().on("propertychange keyup input paste",addInput).end();
initializeDelLink($newInputComponent);
var $newInput = $newInputComponent.find('input');
onlyNums($newInput);
values.push($(this).val());
console.log(values);
}}
function initializeDelLink($elem){
var $delLink=$elem.find('a');
$delLink.click(function(){alert();
$(this).parent('.input-component').remove();
});
}
function onlyNums($elem){
$elem.keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
}
});
http://jsfiddle.net/5KZtB/3/