数字の上下のテキストフィールドの範囲を設定する方法は？

Question

テキストフィールドの範囲を数値の上下に合わせる方法は？テキストボックスの値以上の値は、上下キーを使用して増減することもできますか？

私は（上下）のような二つの画像（増分用）とテキストボックスを使用していますが、（デクリメント用）ここでは、どのように私は、HTML5で

Answer 1

ルックを（私は支柱で働いています）100までの範囲0を設定することができますこれのために作られた入力。

<input type="number" 
     min="0" 
     max="10" 
     step="2" 
     value="6"> 

JavaScriptを使用したい場合は、してみてください...

var input = document.getElementById('your-number-input'), 
    lowerBound = 0, 
    upperBound = 10; 

input.onkeyup = function(event) { 
    event.preventDefault(); 

    var value = parseInt(input.value, 10), 
     keyCode; 

    if (isNaN(value)) { 
     value = 0; 
    } 

    if (window.event) { 
     keyCode = event.keyCode 
    } else if (event.which) { 
     keyCode = event.which 
    } 

    if (keyCode == 38) { 
     value++; 
    } else if (keyCode == 40) { 
     value--; 
    } 

    if (value > upperBound) { 
     value = upperBound; 
    } else if (value < lowerBound) { 
     value = lowerBound; 
    } 

    input.value = value; 
} 

jsFiddle。

Answer 2

編集：アレックスの答えによると、HTML5にはフィールドがあるので、そこには私のステートメントは正しくありません。

HTMLには数字の上に表示されないフィールドがありません。そのため、あなたはJavaScriptの実装（これはhttp://www.htmlforums.com/client-side-scripting/t-help-with-numericupdown-control-59399.htmlのようなもの）を使用していると推測しています。

upボタンとdownボタンのonclickイベントでJavaScript関数が起動されるようにしました。この関数では、if文を使用して変更する値をチェックし、大きすぎる場合は増加させないでください。

あなたは以下の行に沿って何かをしたいと思うでしょう。私はしばらくの間、javascriptを使用していないので、正しい構文を保証することはできません。キープレス用として

if (document.getElementById("input1").value < 5) 
{ 
    document.getElementById("input1").value++ 
} 

、http://www.w3schools.com/jsref/event_onkeypress.aspをチェックしてください。これを使用して、Webページ上の上下のボタンがトリガーするのと同じ機能をトリガーします。