엄격한 숫자 입력 필드

Question

숫자로 설정된 유형의 간단한 입력 필드가 있습니다. [0,255] 범위 (RGB)의 입력을 입력하는 데 사용됩니다.

<input type="number" id="inputBox" min="0" max="255" step="1" /> 

현재의 형태에서,이 입력 필드는 다음의 값을 수용한다 :

012 // zero prefixed numbers 
1.0 // floating-point 
.1 // floating-point 
-5 // range underflow 
300 // range overflow 

난은 [0,255] 범위의 단지 정수를 수락 할. 따라서 접두사가 없으며 부동 소수점 숫자도 없습니다. (.을 허용하지 않음으로써) keydown 이벤트를 사용

inputBox.addEventListener("input", function() { 
    if (this.validity.rangeUnderflow) { 
     this.value = this.min; 
    } 
    else if (this.validity.rangeOverflow) { 
     this.value = this.max; 
    } 
}); 

및 부동 소수점 문제 :

inputBox.addEventListener("keydown", function (e) { 
    if (!isFloat(this.step)) { 
     if (e.key == ".") { 
      e.preventDefault(); 
     } 
    } 
}); 

function isFloat(f) { 
    var f  = parseFloat(f); 
    var floor = Math.floor(f); 
    var fraction = f - floor; 
    if (fraction > 0) { 
     return true; 
    } 
    return false; 
} 

내가 해결에 붙어있어

나는 input 이벤트를 사용하여 범위 문제를 해결했습니다 제로 접두 번호 문제. 나는 제로 접두사 잘 작동

this.value = this.valueAsNumber; // or parseInt(this.value, 10) 

하지만 휴식 이런 종류의 입력 필드의 기능을 제거하기 위해 input 이벤트에 다음 코드 줄을 사용할 수 있습니다. E 표기법으로 값을 입력 할 수 없습니다. 내 경우에는 할 필요가 없지만 어딘가에있을 수 있습니다. 1e을 입력하면 바로 NaN으로 평가되고 입력 필드에 다시 지정됩니다.

두 가지 방법을 모두 사용할 수있는 방법이 있습니까?

JSFiddle

Answer 1

난 그냥 이런 문제에 일했다. 그것은 할 매우 쉽습니다 : 필드의 값이 keydown 이벤트가 아닌 다른 방법으로 변경 될 수 있음을

가

inputBox.addEventListener("keydown", function (e) { 
    if (!isFloat(this.step)) { 
     if (e.key == ".") { 
      e.preventDefault(); 
     } 
    } 
    while (this.value.toString()[0] === "0" && this.value.length > 0){ 
     this.value = this.value.toString().slice(1); 
    } 

}); 

주, paste로 빨아. 따라서이 수표를 validationCheck 함수에 넣고 catchall-onchange을 비롯한 각 관련 이벤트에 대해 해당 함수를 실행합니다.

<input type="text" pattern="0|[1-9]\d*"> 

이 의지는 당신에게 접두사가 0이 붙지 않는 양의 정수의 캐릭터 라인 표현을 제공합니다

Answer 2

당신과 같은 정규 표현식을 사용할 수 있습니다. 그런 다음 값이 255보다 작거나 같으면 JavaScript로 테스트해야합니다.

여기에 JSFiddle입니다. 여러 개의 0 만 포함 된 문자열은 허용되지 않습니다.