web-dev-qa-db-ja.com

ボタンなしでテキストボックス入力を送信する

ユーザーにはテーブルがあり、最後の行には、列ごとに1つずつ、6つの異なるテキスト入力があります。

enter image description here

この入力は、データベースの変数を定義します。 「保存」または「送信」ボタンを作成しないようにする方法を考えています。

簡単な方法は、値を使用してコンボボックスを作成することです。オプションを選択すると、これがデータベースに送信されて保存されます。問題は、値が0から99に加えて「制限なし」になる可能性があることです。

非常に大きな選択ボックスのように聞こえます...

この問題をどのように解決しますか?より良いユーザーエクスペリエンスのためのアイデアはありますか?

保存はページをリロードせずに行われるため、いつ保存を実行すればよいですか?文字を入力するたびに?

ありがとう。

8
Steve

送信ボタンを表示しない場合は、インターフェースをきれいに保つための方法です。 フィールドが選択されたときにのみ送信を表示するように選択することもできます。送信または他の場所をクリックすると、フィールドの選択が解除され、送信が再び非表示になります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

8
TomDoes

これは インライン編集 の場合のように聞こえます。開発中のアプリ全体でインライン編集を使用しています。つまり、データはページの再読み込みなしでajaxを介してサーバーに保存されます。

ページの再読み込みがないため、ユーザーは保存をトリガーしたことを示すフィードバックを取得する必要があります。これは、保存されたフィールドを強調表示することで実行できます(保存されている場合、フィールドは緑色に点滅します。エラー)または、保存の成功または失敗をユーザーに通知する通知を画面のどこかに表示する。

通知には、適切なエラー/成功メッセージを含める必要があります。

[〜#〜] update [〜#〜]:サーバーの更新に適した時間は、ユーザーが入力を終えたとき、フィールドがぼやけたとき(ユーザーがフィールド)

9
nimrod

値を入力した後、ユーザーがフィールドをクリックまたはタブから離れたときに、セルの色を緑または何かに変更して、値が受け入れられたことを示します。

2
rk.

私たちはニムロッドが彼の答えで述べたある種の解決策を使います。唯一の違いは、タイムアウト後にデータを保存することです。たとえば、最初の記号をフィールドに入力し始めてから3〜5秒の非アクティブ状態になるか、もちろんフィールドを離れた後です。このタイムアウトは、システムで構成可能です。

もちろん、編集中のフィールドの現在の状態をユーザーに示す必要があります。次のスキームを使用します。

  • 入力テキストボックスの周囲に境界線なし-値が保存されます
  • 入力テキストボックスの周囲の境界線-値は現在編集中です

「制限なし」も。特定のシステムによっては、「制限なし」として0を使用できる場合があります。値0が対応するエンティティが無効であることを意味する場合、チェックボックスなどの別のコントロールを追加して、これを反映する必要があります。

2
Serg