1

We're looking for a certain type of control, preferably with a Bootstrap implementation. We don't believe it's really uncommon, but we might be wrong.

It's essentially a listbox, but also:

  • It's like an editable combobox, but without a dropdown.
  • Like a tag input/pillbox, but vertical, with a more traditional style, and directly editable.
  • Like an expanding grid, but with a single column.
  • Like a series of vertically attached text input field boxes, on steroids.
  • Like a text area, but properly structured and expanding.

The ultimate goal is to be able to quickly and efficiently input a bunch of values (phone numbers, ...) without leaving the keyboard, while allowing the user to edit or remove existing values painlessly. (The form is relatively large and part of a LOB application.)

  1. Does this control have a name?
  2. Does anyone know of a Bootstrap plugin that provides such a control?
  3. If not, then we're not exactly sure about how to proceed, would you have any pointers for us so that we can implement this in a straightforward way? (Is it a good idea to start with a series of text input fields for example?)

Details:

  1. It's essentially a list,
  2. It starts as something that looks very much like a simple text input field,
  3. When the user presses ENTER, a new row is added below and the cursor is moved to it (the list expands dynamically),
  4. When the user presses TAB, the cursor is moved to the next control,
  5. (Optional) When the user presses the UP or DOWN arrow key, the cursor jumps in the previous or next element, respectively,
  6. Each row is directly editable (the user can click inside any of them and change any character, even in the middle, thus without deleting the element first),
  7. (Optional) There can only be one empty row at the end,
  8. (Optional) If the user focuses another control (for example by pressing TAB) or another element (for example by using the arrow keys or by clicking), the current element is removed if it's empty,
  9. (Optional) In addition to pressing ENTER when the cursor is in the last field, the user can press a button to add a new empty element if the last element is not empty,
  10. There is only one column (no need for a column header),
  11. (Optional) An inline label should be displayed in the last element if it's empty,
  12. There is a button next to each element that allows the user to remove them,
  13. (Optional) When the user presses DELETE twice at the end of an element, the focused element is removed (it must be pressed twice so that a user who keeps the button pressed to delete a bunch of characters doesn't remove the element by accident if that wasn't her intention -- this requirement can be formulated in other ways),
  14. (Optional) The user can undo a delete operation,
  15. (Optional) If the number of elements exceeds a certain limit, a scroll bar appears and the height of the control is fixed at that limit,
  16. (NTH) If the number of elements exceeds a second (normally higher) limit, the list is paginated.
4

1 回答 1

1

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

内容可编辑：

看看这里的contenteditable属性演示。

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

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

每行一个输入：

另一种方法是为每一行使用一个输入。我提供了简单的演示，在按下回车时添加了“新行”。

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

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

于 2013-10-22T01:46:14.773 回答