숫자 입력란에서 텍스트 입력란의 범위를 설정하는 방법은 무엇입니까?

Question

숫자 입력란의 범위를 텍스트 입력란에 설정하는 방법? 텍스트 상자의 값 이상으로 위아래 키를 사용하여 숫자를 늘리거나 줄일 수 있습니까?

내가 (위, 아래) 같은 두 개의 이미지 (증가를위한)와 텍스트 상자를 이용하고 있고 (감소에 대한) 여기가 어떻게 HTML5에

Answer 1

봐 (내가 스트럿하고 있어요) 100 범위는 0을 설정할 수 있습니다 이것에 대한 입력입니다.

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

당신이 시도, 자바 스크립트를 사용하려면

...

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

편집 : Alex의 답변에 따르면 HTML5에는 필드가 있으므로 여기에 대한 내 문장이 잘못되었습니다.

HTML에 숫자로 된 아래쪽 입력란이 없으므로 자바 스크립트 구현 (this like http://www.htmlforums.com/client-side-scripting/t-help-with-numericupdown-control-59399.html)을 사용하고 있다고 가정합니다.

위로 및 아래로 버튼에 onclick 이벤트가 있으면 JavaScript 기능이 트리거됩니다. 이 함수에서는 if 문을 사용하여 값이 변경되었는지 확인하고 너무 큰 경우에는 값을 증가시키지 않으며 그 반대의 경우도 마찬가지입니다.

아래 라인을 따라 원하는 것이 있습니다. 잠시 동안 자바 스크립트를 사용하지 않았으므로 정확한 구문을 보증 할 수 없습니다.

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

키 프레스는 http://www.w3schools.com/jsref/event_onkeypress.asp입니다. 이 기능을 사용하여 웹 페이지의 위/아래 버튼과 동일한 기능을 트리거합니다.