Question

我正在为一些内部创建一个数据录入应用程序。

我的团队需要输入有关“项目”的信息，这些项目可能包含许多“类别”，反之亦然。

我需要一种快捷方式让他们输入任意数量的类别。

这是我的想法：

在项目输入页面上，我将拥有它，以便最初有一个“类别”的文本输入，如果它被标记为空，则输入字段被删除（除非它是唯一的）并且焦点跳过到下一个领域。如果它是而为空，如果它是和的标签，如果它是数组中的最后一个输入字段，那么将添加一个额外的“类别”文本输入并进行聚焦。

通过这种方式，人们可以非常快速地输入任意数量的类别，而无需将手从键盘上移开，只需键入并按下标签即可。然后按两次选项卡表示列表的结尾。

首先，您如何看待这个界面？有没有更好的方法呢？

第二，是否有一个jQuery（或其他）插件来执行此操作？我搜索过但找不到一个。我也搜索了scriptaculous / prototype和mootools，没有运气。

我显然宁愿使用经过尝试和测试的东西而不是自己动手。

赞赏任何和所有建议

Answer 1

实现它实际上并不太难，即使使用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上。如果我选中最后一个字段，它会添加新字段，但会聚焦地址栏。我尝试在insertAfter行之后添加：$copy.find(":text").focus();，但它不会改变任何内容。任何想法？

如果我换班，那么模糊处理程序也不知道我会向相反的方向前进。那有什么办法吗？

嗯，我没想过。您可以尝试做的是在所有可以获得焦点的文本字段之后放置一个元素（就像在屏幕外呈现的文本框，例如：margin-left: -10000px）。在其上添加一个onfocus处理程序以查看最后一行是否为空，如果是，那么它就会被onBlurHandler函数添加，所以将焦点传递回最后一行。如果最后一行不为空，则将焦点传递给下一个元素（可能是您的提交按钮）。如果DOM中尚未存在最后一行的问题，则将上述内容置于超时状态。

（如果这确实有效），这应该让您的用户可以毫不费力地向后和向前切换。

Answer 2

首先，我将尝试解决在nickf解决方案上发表的问题。

将焦点设置在新创建的输入$copy.find(":text").focus();上将不起作用。 jQuery焦点方法仅触发事件，但不调用底层焦点方法。

您可以使用setTimeout(function(){$copy.find(":text").get(0).focus()}, 10);设置焦点，但是：

在firefox中需要setTimeout，或者闪烁的光标会发生奇怪的事情。
IE7在标签时需要另一个输入来对焦。如果焦点转到地址栏，我还没有找到将焦点设置在输入上的方法。我想这不会有问题，因为你至少需要一个提交按钮。

要控制shift-tab，我一直在尝试跟踪聚焦元素，以便在聚焦元素是前一个输入时跳过blurHandler，但结果代码真的很难看，所以我会发布这个并查找一个更好的解决方案。

最后，你问的是我们对这个UI的看法，我认为以逗号分隔的类别列表更容易编码填写。： - ）

动态增长文本输入数组（HTML / JavaScript）

2 个答案: