1

特定のタイプのコントロールを探しています。できれば Bootstrap の実装が必要です。本当に珍しいことだとは思いませんが、間違っているかもしれません。

これは基本的にリストボックスですが、次のこともできます。

  • 編集可能なコンボボックスに似ていますが、ドロップダウンはありません。
  • タグ入力/ピルボックスに似ていますが、垂直で、より伝統的なスタイルで、直接編集可能です。
  • 拡張グリッドに似ていますが、1 つの列があります。
  • 強化された一連の垂直に取り付けられたテキスト入力フィールド ボックスのように。
  • テキストエリアに似ていますが、適切に構造化され、拡張されています。

最終的な目標は、ユーザーが既存の値を簡単に編集または削除できるようにしながら、キーボードを離れることなく一連の値 (電話番号など) をすばやく効率的に入力できるようにすることです。(フォームは比較的大きく、LOB アプリケーションの一部です。)

  1. このコントロールに名前はありますか?
  2. そのような制御を提供する Bootstrap プラグインを知っている人はいますか?
  3. そうでない場合は、どのように進めればよいか正確にはわかりません。これを簡単な方法で実装できるように、何かアドバイスはありますか? (たとえば、一連のテキスト入力フィールドから始めるのは良い考えですか?)

詳細：

  1. それは本質的にリストであり、
  2. 単純なテキスト入力フィールドに非常によく似たものから始まり、
  3. ユーザーがENTERを押すと、新しい行が下に追加され、カーソルがそこに移動します (リストは動的に展開されます)。
  4. ユーザーがTABを押すと、カーソルは次のコントロールに移動します。
  5. (オプション) ユーザーが上矢印キーまたは下矢印キーを押すと、カーソルはそれぞれ前または次の要素にジャンプします。
  6. 各行は直接編集可能です (ユーザーはそれらのいずれかをクリックして、途中でも任意の文字を変更できるため、最初に要素を削除する必要はありません)。
  7. (オプション) 最後に 1 行だけ空にすることができます。
  8. (オプション) ユーザーが別のコントロール (たとえば、TABを押すことによって) または別の要素 (たとえば、矢印キーを使用するかクリックすることによって) にフォーカスを当てた場合、現在の要素が空の場合は削除されます。
  9. (オプション)カーソルが最後のフィールドにあるときにENTERを押すことに加えて、最後の要素が空でない場合、ユーザーはボタンを押して新しい空の要素を追加できます。
  10. 列は 1 つだけです (列ヘッダーは必要ありません)。
  11. (オプション) 最後の要素が空の場合、インライン ラベルを表示する必要があります。
  12. 各要素の横には、ユーザーが要素を削除できるボタンがあります。
  13. (オプション) ユーザーが要素の最後でDELETEを 2 回押すと、フォーカスされた要素が削除されます (ボタンを押し続けて一連の文字を削除するユーザーが誤って要素を削除しないように、2 回押す必要があります)それが彼女の意図ではなかった場合 -- この要件は他の方法で定式化できます)、
  14. (オプション) ユーザーは削除操作を元に戻すことができます。
  15. (オプション) 要素の数が特定の制限を超えると、スクロール バーが表示され、コントロールの高さがその制限に固定されます。
  16. (NTH) 要素の数が 2 番目の (通常はより高い) 制限を超えた場合、リストはページ分割されます。
4

1 に答える 1

1

私はあなたのニーズに合ったコントロールを知らないので、いくつかの実装オプションを提案しようとします:

コンテンツ編集可能:

ここでcontenteditable属性-demo を見てください。

これはすべての要件に一致するわけではありません (ポイント 12 がここでの主なブロッカーです) が、非常に優れた OOTB であり、( MDNによると) クロスブラウザーです。

上記のデモは、独自のソリューションの出発点として適しています。

1 行に 1 つの入力:

もう 1 つのアプローチは、行ごとに 1 つの入力を使用することです。Enter キーが押されたときに「改行」を追加する簡単なデモを提供しました。

この実装には、キーボード イベントでのボクシングも少し必要ですが、この行ごとに 1 つの要素のモデルは、ビジネスのニーズをよりよく反映しているようで、かなり柔軟です。ただし、より大きなデータセットでのパフォーマンスについては心配です。

これは、contenteditableアプローチ (編集可能な<li>要素のリストなど) と組み合わせることもできますが、利点はないようです。contenteditableデフォルトでは行数を制限しないため、問題が発生することさえあります。regularinputを使用すると、1 つの要素に 1 行が含まれることが保証されます。

于 2013-10-22T01:46:14.773 に答える