Динамически растущий массив текстовых вводов (HTML / JavaScript)

на самом деле это не так уж сложно реализовать, даже с ванильным JS (т.е. без jQuery, прототипа и т.д.), но все проще с jQuery, поэтому я попробую использовать это:

Предполагая такую ​​структуру:

<form id = "myForm">
    <div class = "inputRow">
        <input type = "text" name = "myInput[]" />
    </div>
    <div class = "inputRow">
        <input type = "text" name = "myInput[]" />
    </div>
    ...
</form>

Вот JS

$('#myForm :text').blur(onBlurHandler);

function onBlurHandler() {
    $row = $(this).parent();
    if ($row
        .nextAll(":has(:text)")     // all following divs with a text element
        .length == 0                // but there aren't any, we're on the last one
    ) {
        if ($.trim($row.find(":text").val())) { // the text box isn't empty
            $copy = $row.clone(true);
            $copy
                .find(":text")  // get the new text box,
                .val('')        // remove any text in it
                .blur(onBlurHandler) // and add the event handler (is this necessary?)
            ;
            $copy.insertAfter($row);
        } else if ($row.prev(':has(:text)').length) {   // the text box is empty, and this one isn't the first row
            $row.remove();  // get rid of the row.
        }
    }
}

Ответ на комментарии:

thanks for the answer! i've tried it but it doesn't seem to work as intended. i'm on mac firefox. if i tab off the last field, it adds the new one but focuses the address bar. i tried adding: $copy.find(":text").focus(); after the insertAfter line, but it doesn't change anything. any ideas?

also if i shift-tab the blurhandler doesn't know i'm going in the opposite direction. is there any way around that?

Хм, я не думал об этом. Что вы можете попробовать сделать, так это поместить элемент после всех ваших текстовых полей, которые могут принимать фокус (например, текстовое поле, которое отображается за пределами экрана, например: margin-left: -10000px). Добавьте к нему обработчик onfocus, чтобы увидеть, пуста ли последняя строка, и если это так, то она была бы добавлена ​​только тогда функцией onBlurHandler, поэтому передайте фокус обратно последней строке. Если последняя строка не пуста, передайте фокус следующему элементу (вероятно, вашей кнопке отправки). Если есть проблемы с последней строкой, еще не существующей в DOM, поместите указанное выше в тайм-аут.

(Если это действительно работает), это должно позволить вашим пользователям переходить вперед и назад без проблем.

Сначала я попытаюсь решить проблемы, прокомментированные решением nickf.

Установить фокус на вновь созданный вход $copy.find(":text").focus(); не получится. Метод фокуса jQuery только запускает событие, но не вызывает базовый метод фокуса.

Вы можете установить фокус с помощью setTimeout(function(){$copy.find(":text").get(0).focus()}, 10);, но:

• setTimeout необходим в firefox, иначе с мигающим курсором будут происходить странные вещи.

• IE7 нужен другой вход для фокусировки при переходе с табуляции. Я не нашел способа установить фокус на ввод, если фокус переходит на адресную строку. Полагаю, это не будет проблемой, потому что вам понадобится как минимум кнопка отправки.

Чтобы управлять shift-tab, я пытался отслеживать сфокусированный элемент, чтобы пропустить blurHandler, когда сфокусированный элемент является предыдущим вводом, но полученный код действительно уродлив, поэтому я опубликую его и поищу лучшее решение .

И наконец, вы спрашиваете, что мы думаем об этом пользовательском интерфейсе, и я думаю, что список категорий, разделенных запятыми, легче закодировать и заполнить. :-)