テキストボックスに任意の値を入力できないことをユーザーに知らせますか？
私の現在のWebプロジェクトには、ユーザーがオークションの入札を入力できるテキストボックスがあります。ただし、任意の合計の入札を防ぐために、所定の間隔に一致する特定の値のみが許可されます。
たとえば、現在の入札価格が240ユーロの場合、ユーザーは241ユーロに入札することはできません。260ユーロ、280ユーロ、または300ユーロ（など）で入札する必要があります。入札は彼が望むだけの大きさにすることができますが、それは単に間隔に合う必要があります。
ユーザーの利便性を高めるために、テキストボックスに入力した値に近い可能な入札値を示します。
私の問題は、これによって無効な値の入力や送信が実際に停止されることはないということです。ユーザーは値を提案として表示し、他の値を入力します。私ができることは、これが発生したときにエラーを表示し、彼が入力したものに近い別の値を提案することです。これは事後の整理ですが、私はむしろ先制的にユーザーを助けたいと思います。
する必要がある私が提案する値の1つを選択し、何も送信できないことをユーザーに明確に示すより良い解決策はありますか？テキストボックスの代わりに対数スライダーを使用することを考えましたが、入札できる最大額はなく、私の顧客はテキストボックスソリューションを多少好んでいます。
このシナリオを処理する別の方法を考え出しました これは、任意のジャンプの場合により明確になります。
1。テキスト入力の下にリンクを表示して、最初から右クリックするだけで選択できる有効な選択肢を一覧表示することで、入札システムがどのように機能するかをすばやく伝えます。
2。ユーザーが入力またはクリックしたときに有効な選択肢を更新しますユーザーは68を入力するか、対応するリンクをクリックして同じ結果を得ることができます。
入力が数値である限り、その周りの有効なオプションを更新しますが、フォーカスが失われるまで（つまり、ユーザーがタブをクリックするか、離れてクリックするまで）入力を検証しないでください。
3。フォーカスアウトでは、値が無効である場合にユーザーに知らせて、状況をすばやく修正できるようにします。
私は最近、数字だけを使用し、ローカライズを必要としない 新しいタイプのポケットベルコントロール をいじっていました（次、前、最後、最初、UIで必要な単語なしのすべての機能）
ここであなたのケースで動作するように少し修正しました。アイデアは、テキスト入力がないため、ユーザーが必要なものを何も入力できないことをユーザーに前もって明確にすることです...
この例では、最小入札価格と最大入札価格の両方を想定していますが、最大入札価格を削除することもできます。
値間の大きなジャンプは、...をクリックしてから入力することによっても実現できます。
入力した数に関係なく、10の倍数として表示されることをユーザーに示すことができます。ガベージが入力されると、操作は実行されず、クリックできる使用可能なオプションのリストが表示されます。
HTML5では、input要素がstep属性をサポートしています。例： http://jsfiddle.net/yhffroa1/
ただし、すべてのブラウザがまだサポートしているわけではありません。 IE特に_<input type="number">_のスピナーボタンはなく、モバイルブラウザはstepをまったく考慮しません。
必要に応じて_:valid_/_:invalid_疑似クラスを適用するpattern属性もありますが、これは正規表現のみをサポートします。 JQueryを使用するか、必要に応じてこれらのクラスを追加または削除する必要があります。
しかし、それはあなたの質問に答えません、あなたは彼らが間違ったことをユーザーに伝えたいです！その場合は、ブラウザにカスタムメッセージを表示するよう指示する setCustomValidity() が必要です。 caniuse.comにはまだありません。使用方法がわからないのでテストできませんが、少なくともFirefoxでは動作すると思います。 Stack Overflowにはそれについてたくさんの質問があります。
ユーザーがselectのみを使用し、enterを使用しないことを確認するには、入力フォームを削除する必要があります。これは、ユーザーに入力を促すためです。
または、私は
現在の入札単価をデフォルトとして設定し、ユーザーが「$ 445（+ $ 15）、$ 460（+ $ 30）など」などの値からのみ選択できるようにします。
現在の入札単価をデフォルトとして設定し、+ $ 10（または最小値）から+ $ 200（または最大値）までのオプションのリストをユーザーに提供します
リストの代わりに、現在のビッドで始まり、各マイルストーンに「磁気」ストッパー（+ 10、+ 15、+ 20、+ 30などの「スティック」）があるスライダーを表示します。
私は個人的に、Windowsが数値入力で最近行っていることのファンです。無効なものを入力すると、エラーを通知する「ツールチップ」タイプのポップアップが表示されます。
当然のことながら、コントロールのメッセージは「入札価格は20ユーロの倍数である必要があります」に似ています。
このようなデザインはどうですか？
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
"理想的な入札"テキストボックスにユーザーが必要な数を入力することを許可しますが、無効な "実際の入札"テキストボックスの最も近い増分（ユーザーが意図した金額を超えないように切り捨てます）。
必要なのは、検索可能なドロップダウン/選択リストです。この例の違いは、検索のために入力する領域はデータ入力フィールドではなく、オプションのリストを表示することだけです。ドロップダウンをクリックして展開し、検索フィールドに入力してから、何も選択せずにクリックすると、選択内容は変更されず、入力した内容は破棄されます。これにより、提示する値の1つを選択する必要があることが明確になります。正確な値を入力してEnterキーを押すと、適切な値が自動的に選択されます。
Select2ドロップダウン この動作を正確に実装します。関数/イベントを使用して、入力された内容に基づいて動的に選択リストを生成できるため、ajaxリクエストは必要なく、すべての可能な値を持つドロップダウンを作成する必要はありません。これはselect2の高度な使用例ですが、近くにある値をオーバーライドして表示できるquery javascript関数を提供するため、非常に可能です。
Twitterのtypeahead もこれのよく知られている実装です。
入力ウィジェットに完全に焦点を当てるのではなく、ウィジェットに加えて、インプロセス修正UIは非常に強力です。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
スペースに制約がない場合は、ユーザーが希望する値を入力して、最も近い許容値に丸めることができます。これがスペースを必要とする理由は、実際の許容値を示すだけでなく、何が起こっているかの説明を示す必要があるためです。何かのようなもの：
あなたの入札
オークションを不必要に延ばす少しの増加による任意の入札を防ぐために、特定の値のみが許可されます。下に入力した値は、最も近い許容値に自動的に丸められ、[入札単価]ボックスに表示されます。入札を送信する前に、調整後の金額が受け入れ可能であることを確認してください。
あなたの入札：[はっきり見えるボックス]ここに値を入力してください：[通常の番号入力ボックス]
もちろん、テキストとスタイルを調整する必要がありますが、私はこれを最初に試します。
サイトを調べていると、有効な値のみの入力を許可する この質問 で他の2つのアイデアに出くわしました。
スライダー
さまざまな速度でドラッグできるスライダー（アイデアとJonWによる画像）：
利点
- 柔軟な間隔が可能（つまり、200と500の間で+20、値が500を超える場合は+50）
- 右にさらにドラッグすることで、値のより速い増加/減少
- 最大値は不要
欠点
- 特定のユーザーが使用するのは直感的でない場合があります
オドメーター
数字の各桁を調整できるコントロール（Chase Sandmannによるアイデアと画像）
利点
- 1桁を調整すると無効な数値になる場合は、コントロールが別の桁を移動して間隔に合うようにします。 （または、調整時に無効な数字を完全にスキップする）
- 高い値の迅速な選択が可能
欠点
- 固定桁数で可能な最大値を持っている
両方のソリューションの利点は、単純なテキストボックスよりも多くのスペースを必要としないことです。
編集できないオートコンプリート
入力すると、選択肢が絞り込まれます（単にフィルター）
数字だけが有効な場合は、無効なキーストロークを破棄するだけです
無効なシーケンスを入力した場合、有効な選択肢がないだけです
Enterキーは、ユーザーが現在の選択を受け入れることを示すために使用されます
タブキーは有効な選択リストの次のアイテムです
最小入札価格から開始するのは、入札が110で、120を入札したい場合、編集する必要があるかのように問題があります。
最初の番号まで記入しません
1、2と入力してみましょう。
つまり、2で始まった場合、200、205、210を与えることになります。
シンプルな上下制御
シンプルなスライダーコントロール