web-dev-qa-db-ja.com

数値の増分に制限されている数値入力を表す方法

フィールド値を50の固定増分に制限するフォームの要件があり、その制約を意味のある方法で表す最もエレガントな方法が何であるかわかりません。

頭に浮かぶ最も簡単なソリューションは、jQuery検証メソッドと、通常のテキストフィールド入力に関連付けられているサーバー側ロジックの組み合わせです。頭に浮かぶ他の代替案は、一定の数の値を持つドロップダウンリストまたはドロップダウンリストで進む、ある種の数値ピッカー（現時点ではわかりません）です。

他のアイデアは？あなたにとって最も直感的に感じるものは何ですか？

website-designformsgui-designcontrols
14
Nathan Taylor

Safari for HTML5に実装されている方法を使用することをお勧めします。ご覧のとおり here HTML5には、新しい属性を持つ新しい入力タイプもあります。この場合、「step」という属性を持つ数値の入力タイプを使用します。コードは次のようになります。

<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />

今のところ、これを使って何かを行うブラウザはそれほど多くありません。ただし、そのコードをSafariで（HTML5 doctypeを使用して）表示すると、通常のテキスト入力フィールドに、フィールド内の値を「step」値だけ増加させる上/下矢印を提供するコントロールが表示されます。あなたが割り当てた。

したがって、UI要素の場合、それをまだサポートしていないブラウザーの場合、入力フィールドの横にある上向き/下向きの矢印を複製します。特定の値を期待していることをユーザーに知らせるには、「50の倍数を入力してください。例：0、50、100、150など」と書くだけです。次に、明らかに、入力した数値がこれらの範囲内であることを検証するために、クライアント側またはサーバー側のコードが必要になります。

9
RussellUresti

スライダーを使用します。ほとんどのUIライブラリはスライダーコントロールを提供し、通常は50などの「ステップ」を定義するオプションを提供し、選択をその値の任意の倍数に制限します。

HTML5を使用している場合、inputタグには「範囲」タイプ（step属性を含む）があり、HTML5をサポートするほとんどのブラウザーでサポートされているはずです。 http://dev.w3.org/html5/markup/input。 range.html

7
Rahul

目的は何ですか？

それが会計/数学/数値に関連するものであった場合、乗数を提案します。 「x 50」が表示され、合計が表示されます。論理アプリケーションの増分が50の場合、「50の増分」を使用しないのはなぜですか。

4
Susan R

範囲スライダーを他の人が提案するように使用するのが最善だと思います。または、ユーザーが入力を開始したときに提案を表示する入力ボックスにAutocomplete機能を使用できます。これらの方法の両方のクロスブラウザーの例を次に示します。

スライダー：http://jqueryui.com/demos/slider/#range

オートコンプリート：http://jqueryui.com/demos/autocomplete/

1
Surendra Vikram Singh

実際には、最小値と最大値にも依存します。

可能な値を示すために、通常の選択リストのみを使用しました。もう1つの解決策は、合計を単純な方法で表示することです。これにより、ユーザーは自分で乗数を入力できますが、結果は表示されます。

mockup

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

1
Nick P