web-dev-qa-db-ja.com

数値入力フィールド値を自動的に制限または修正する

私が取り組んでいるアプリケーションインターフェイスには、数値を選択するためのスライダーがありますが、その横にテキスト入力フィールドがあります。これにより、現在選択されている値を読み取ることができますが、代わりにキーボード入力もサポートされます。スライダーには、スライダーをドラッグするときにスライダーの範囲によって適用される範囲の制限がありますが、ユーザーがキーボード入力を使用する場合は、ユーザーが入力フィールドをぼかすと個別に検証されます。

私が苦労しているのは、数値入力を自動的に修正する機能ユーザーが入力している間です。これは絶対に必要なわけではありませんが、スライダーがインタラクティブに結果を変更するので、常に有効な値を持っているといいでしょう。

数値が上限を超えている場合、数値を単に最大値にリセットするのは非常に簡単です。ただし、最小制限がある場合、この自動修正は処理が難しくなります。

制限が0-145になると想像してください。ユーザーは2、次に1の入力を開始します。ここまでは順調ですね。次に、入力5に続き、215という数値が145より大きい場合、入力とスライダーが145にリセットされることを意味します。

ただし、制限が15-145の場合:ユーザーが入力する数値は1桁で始まるため、15の最小制限よりも小さくなります。 これに対処するための可能なオプションは何ですか?

6
kontur

一部のテキスト入力を自動的に変更した場合、ユーザーはそれが変更されたことに気付かない可能性があります。それは彼らが期待することと何が起こるかの間の不一致につながります。

これには2つの解決策があります。

  1. スライダーで値を変更できるようにし、入力フィールドを読み取り専用フィールドにします。これは最も簡単で、ユーザーにとっては最も簡単だと思います。
  2. テキスト入力が本当に必要な場合は検証する必要があります。有効な数値でない場合は、何らかの方法でユーザーに通知し、有効な値を説明する必要があります。送信ボタンまたは同様のボタンがある場合は、それが選択されたときに検証します。そうでない場合は、次の場合に検証します。
    a)焦点の変更
    b)一定時間アクティビティがない(通常は0.5〜1.0秒で十分)
5
JohnGB

ユーザーがテキスト入力フィールドからフォーカスを離れるとすぐに、ユーザー入力を検証できます。

それが最小制限よりも小さい場合は、それを最小制限に自動修正し、強調表示されたテキストまたはアラートボックスを介してユーザーにそれを伝えることができます。

1
000