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

Question

Я создаю приложение для ввода данных для некоторых собственных вещей.

Моя команда должна ввести информацию о «предметах», которые могут иметь много «категорий» и наоборот.

Мне нужен быстрый способ позволить им ввести произвольное количество категорий.

Вот моя идея:

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

Таким образом, люди могут очень быстро вводить произвольное количество категорий, не отрывая рук от клавиатуры, просто печатая и нажимая клавишу Tab. Затем дважды нажмите на вкладку, чтобы обозначить конец списка.

Прежде всего, что вы думаете об этом интерфейсе? Есть ли лучший способ сделать это?

Во-вторых, есть ли плагин jQuery (или что-то еще) для этого? Я искал, но не могу найти. Я искал scriptaculous / prototype и mootools тоже без удачи.

Я бы, очевидно, предпочел бы использовать что-то испытанное и проверенное, чем бросать свое.

Любой совет приветствуется

Answer 1

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

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

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

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

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

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

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

Answer 2

на самом деле это не так уж сложно реализовать, даже с использованием vanilla 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.
        }
    }
}

---

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

спасибо за ответ! Я попробовал это, но это не работает, как задумано. Я на Mac Firefox. если я добавляю последнее поле, оно добавляет новое, но фокусируется на адресной строке. я попытался добавить: $copy.find(":text").focus(); после строки insertAfter, но это ничего не меняет. есть идеи?

также, если я нажму клавишу табло, то размыкатель не будет знать, что я иду в противоположном направлении. есть ли способ обойти это?

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

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