web-dev-qa-db-ja.com

入力ボックスを0〜100に制限する

0〜100の値を取る入力ボックスがあります。ユーザーが大きくも小さくも書き込めないようにしたい。

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

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

javascriptjqueryinputlimitkeyfilter
15
Jourkey

次のような単純なJavaScriptを使用します。

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

次に、次のように入力ボックスを宣言します。

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

この関数はonchange（）にフックしているため、ユーザーが入力ボックスに何かをコピー/貼り付けした場合でも機能します。

38
Kshitij Saxena -KJ-

JQuery Validation プラグインを使用することをお勧めします。非常に柔軟で拡張可能です。範囲クエリを処理するには、次のようにします。 「パーセンテージ」クラスでマークされたフォーム内の入力が存在し、指定された範囲内にあることが検証されます。

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

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

プラグインを使用することをお勧めする理由は、プラグインが多くの検証状況をすぐに処理し、多くのシナリオで検証コードを記述する責任を軽減するためです。より良い方法で創造的な努力を費やすことができます。また、多くの人が使用しているため、大規模なコミュニティによって改善されるという利点もあります。

Update：また、 slider （ demo ）ユーザーエラーの影響を受けない方法でデータを制約します-または少なくともこの特定のタイプのエラーではありません。

11
tvanfosson

HTML5はいくつかの新しい入力タイプを追加しました 、numberを含みます。

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

古いWebブラウザーでサポートされていない新しい入力タイプは、<input type="text">として動作します。

実行可能な例 W3Schoolsから。

9
Mahdi Bashirpour

あなたはMath.maxとMath.minを使うことができます

val = Math.min(100,Math.max(0,val));
5
jilykate
document.getElementById("test_id").onkeyup = function() {
  var input = parseInt(this.value);
  if (input < 0 || input > 100)
    console.log("Value should be between 0 - 100");
  return;
}
<input type="text" id="test_id" />
2
Xinus

各キーストロークの後で、それがフィールドに送信される前に（たとえば、キープレスイベントハンドラーを使用して）フィールドの値をテストする必要があるだけです。

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

1
Guss

これを行うにはjQueryによって

<input type="number" name="quantity">

数値が0から100の間でない場合、空の入力フィールド

<script>
    $("input[name='quantity']").change(function() {
      number = $("input[name='quantity']").val()
       if( number <= 0 || number >= 100 ) {
           $("input[name='quantity']").val("");
           alert("0 - 100");
         }
       });
</script>
0
Alfred.P