可编辑，扩展Bootstrap的输入列表控件

Question

我们正在寻找某种类型的控件，最好是使用Bootstrap实现。我们不相信这种情况并不常见，但我们可能错了。

它本质上是一个列表框，但也包括：

• 它就像一个可编辑的组合框，但没有下拉列表。
• 与标记输入/药丸盒类似，但是垂直，具有更传统的风格，直接可编辑。
• 类似于扩展网格，但只有一列。
• 像一系列垂直附加的文本输入字段框，类固醇。
• 像文字区域一样，但结构合理，不断扩展。

最终目标是能够在不离开键盘的情况下快速有效地输入一组值（电话号码......），同时允许用户无痛地编辑或删除现有值。 （表单相对较大，是LOB应用程序的一部分。）

1. 此控件是否有名称？
2. 有没有人知道提供这种控件的Bootstrap插件？
3. 如果没有，那么我们不确定如何继续，您是否会为我们提供任何指示，以便我们能够以直接的方式实现这一点？ （例如，从一系列文本输入字段开始是一个好主意吗？）

详细说明：

1. 它基本上是一个列表，
2. 它的开头看起来非常像一个简单的文本输入字段，
3. 当用户按下 ENTER 时，会在下面添加一个新行，并将光标移动到该行（列表会动态展开），
4. 当用户按 TAB 时，光标移动到下一个控件，
5. （可选）当用户按下 UP 或 DOWN 箭头键时，光标分别跳转到上一个或下一个元素，
6. 每行都可以直接编辑（用户可以点击里面其中任何一行并更改任何字符，即使在中间，也不会先删除元素），
7. （可选）最后只能有一个空行
8. （可选）如果用户聚焦另一个控件（例如，通过按 TAB ）或其他元素（例如使用箭头键或单击），则当前元素为空时将被删除，
9. （可选）当光标位于最后一个字段时，除了按 ENTER 外，如果最后一个元素不为空，用户可以按一个按钮添加一个新的空元素，
10. 只有一列（不需要列标题），
11. （可选）如果内联标签为空，则应在最后一个元素中显示
12. 每个元素旁边都有一个按钮，允许用户删除它们，
13. （可选）当用户在元素末尾按两次 DELETE 时，会删除聚焦元素（必须按两次，以便按下按钮的用户删除一堆如果不是她的意图，字符不会意外删除元素 - 此要求可以通过其他方式制定），
14. （可选）用户可以撤消删除操作，
15. （可选）如果元素数量超过某个限制，则会出现滚动条，控件的高度固定为该限制，
16. （NTH）如果元素数量超过第二个（通常更高）限制，则列表将被分页。

Answer 1

由于我不知道任何适合您需求的控件，我会尝试建议一些实现选项：

---

<强> CONTENTEDITABLE：

查看contenteditable属性 - demo here。

这不符合你的所有要求（第12点是这里的主要阻止者），但它非常好OOTB，并且（根据MDN）跨浏览器。

上面提供的演示可能是您自己的解决方案的良好起点。

---

每行一个输入：

另一种方法是为每一行使用一个输入。 我提供了simple demo，在按下输入时添加“新行”。

虽然此实现还需要对键盘事件进行一些装箱，但这个每行一元素模型似乎更能反映您的业务需求并且非常灵活。 不过，我会担心更大的数据集的性能。

这也可以与contenteditable方法混合使用（例如，可编辑的<li>元素列表），但它似乎没有带来任何好处。它甚至会带来一些问题，因为contenteditable默认情况下不会限制行数;使用常规input，您可以保证一个元素包含一行。