2009-09-05 8 views
9

入力ボックスの値は0〜100です。私は、ユーザーがより大きなものや小さなものを書くのを防ぎたい。入力ボックスを0〜100に制限します。

私は、フィールドの入力を制限するためにjqueryのkeyfilterプラグインを使用してきた: http://code.google.com/p/jquery-keyfilter/

このプラグインは、範囲内の数字への入力を制限することはできませんが。ユーザーが範囲を超える数値を入力しないようにするにはどうすればよいですか。ありがとう。

答えて

31

使用平野はjavascript:

<script> 
    function handleChange(input) { 
    if (input.value < 0) input.value = 0; 
    if (input.value > 100) input.value = 100; 
    } 
</script> 

次に、このように入力ボックスを宣言:あなたは()をONCHANGEするために、この機能を夢中にしているので

<input type="text" onchange="handleChange(this);" /> 

、それもユーザーならば動作します入力ボックスに何かをコピー/ペーストします。

+0

ありがとうございました。インラインではないようにイベントをバインドするにはどうすればいいですか? – Jourkey

+8

-1 \t許容値を強制することは、恐ろしいインタフェース設計です。不注意なユーザーは、このように意図しないデータを簡単に入力することがあります。データに無効なフラグを付けて、ユーザーに調整方法を選択させる必要があります。おそらく、彼らは間違ったボックスに入力しただけで、値は本当にどこにあるのでしょうか。 – tvanfosson

+0

私はあなたのポイントを間違いなく見ています。しかし、これはまさにスライダーがしていることではありませんか?あなたが100以上にしようとすると、それは100 /最大にあなたを強制的に戻します。 – Jourkey

1

各キーストロークの後で、フィールドに送信する前にフィールドの値をテストするだけです(たとえば、keypressイベントハンドラを使用して) - 新しいキーストロークが値が大きすぎる場合は、キープレスを拒否します。

たとえば、現在の値が20で、ユーザーが3番目の番号を入力しようとすると、イベントハンドラからfalseを返すことでキーを拒否する必要があります。基本的には、現在のフィールド値が「10」の場合にのみ、「0」としてください。このような

+1

この方法を使用しないことをお勧めします。少なくともブラーイベントに変更してください。人々は、入力が完了する前に入力が検証されるのが好きではありません。もちろん、キーを押さずにテキストボックスに値を入力することは可能です。 (マウスペースト) – recursive

1
<input type="text" id="test_id" /> 
<script> 
document.getElementById("test_id").onkeyup=function(){ 
    var input=parseInt(this.value); 
    if(input<0 || input>100) 
    alert("Value should be between 0 - 100"); 
    return; 
}  
</script> 
+0

アラートを使用しなかった場合は、これで問題はありません。私はこのタイプの通知のためにポップアップが嫌いです。 – tvanfosson

9

jQuery Validationプラグインを使用することをおすすめします。非常に柔軟で拡張性があります。範囲照会を処理するには、次のようにします。 「パーセンテージ」クラスでマークされたフォーム内の入力はすべて存在し、指定された範囲内に収まるとみなされます。

$("#myform").validate({ 
    rules: { 
    percentage: { 
     required: true, 
     range: [0, 100] 
    } 
    } 
}); 

<input id="percent" name="percent" class="percentage" /> 

私はプラグインを使用することをお勧め理由は、それは多くのシナリオの検証コードを書くために責任のあなたの緩和、箱から出して、多くの検証状況を扱うということです - あなたがより良い方法であなたの創造的な努力を費やすことができます。それは多くの人々によっても使用されているので、大きなコミュニティによって改善されるという追加の利点があります。

更新:また、あなたは、このようなユーザー・エラーの影響を受けない方法でデータを制約しますsliderdemo)として、代替入力メカニズムを検討する必要があります - このまたは少なくともありません特定のタイプのエラー。

+0

ご協力いただきありがとうございます。私はスライダーと入力ボックスを持っています。スライドは入力ボックスに引っかかり、逆も同様です。私が検証を使用していない理由は、大きすぎる値を入力するとスライダを100%に設定するだけなので、入力ボックスは追跡されず、ちょっと変わってしまうからです。また、ぼかしイベントは、ユーザをページから離したり、入力フィールドを隠したりする可能性があり、ユーザはエラーを見ることなく壊れた値を残すことになります。 – Jourkey

+0

@Jourkey - 受け入れられた答えに関するコメントを参照してください。私はスライダを作成するときに入力を非表示にします。それがオプションではない場合、少なくとも私は警告を投げて、値を強制するのではなくフォームを送信させないようにします。 – tvanfosson

-2

そのわずかの文字数のために(たとえば)20を超えない場合は、あなたが入力フィールドに他のいくつかのケースを処理する必要がある場合は、その関数が良いだろう

<input type="text" name="usrname" maxlength="20" /> 

を使用することができますオプション。

+2

それは文字列の長さではなく、入力の値です! – behz4d

4

あなたはnumberを含むMath.maxとMath.min

val = Math.min(100,Math.max(0,val)); 
5

HTML5 added several new input typesを、使用することができます。古いWebブラウザでサポートされていません

<form> 
    Quantity (between 1 and 100): 
    <input type="number" name="quantity" min="1" max="100"> 
</form> 

新しい入力タイプは、<input type="text">として動作します。

Runnable example W3Schoolsから。

関連する問題