필드 의 "실제" 값을 어떻게 얻을 수 <input type="number">있습니까?

나는이 input상자를, 그리고 난 새로운 HTML5 입력 유형을 사용하고 있습니다 number:

<input id="edQuantity" type="number">

이것은 대부분 Chrome 29에서 지원됩니다.

내가 지금 필요한 것은 사용자가 입력 상자에 입력 한 "원시" 값 을 읽을 수있는 기능 입니다. 사용자가 번호를 입력 한 경우 :

그러면 edQuantity.value = 4모든 것이 잘됩니다.

그러나 사용자가 잘못된 텍스트를 입력하면 입력 상자를 빨간색으로 표시하고 싶습니다.

불행히도 type="number"입력 상자의 경우 텍스트 상자의 값이 숫자가 아니면 value빈 문자열 을 반환합니다.

edQuantity.value = "" (String);

(최소한 Chrome 29에서)

컨트롤 의 "원시" 값을 어떻게 얻을 수 <input type="number">있습니까?

입력 상자의 다른 속성에 대한 Chrome의 목록을 살펴 보았습니다.

실제 입력과 유사한 것을 보지 못했습니다.

상자가 "비어 있는지 " 알 수있는 방법도 찾을 수 없습니다. 아마도 내가 추론 할 수 있었다.

value          isEmpty        Conclusion
=============  =============  ================
"4"            false          valid number
""             true           empty box; not a problem
""             false          invalid text; color it red

참고 : 수평 규칙 이후의 모든 것을 무시할 수 있습니다. 질문을 정당화하는 것은 단지 필러 일뿐입니다. 또한 : 예제를 질문과 혼동하지 마십시오. 사람들은 이유는이 질문에 대답 할 수 있습니다 다른 상자 붉은 색칠 이상을 (하나의 예 : 텍스트를 변환 "four"라틴어로 "4"및 onblur 이벤트 기간 동안 기호)

컨트롤 의 "원시" 값을 어떻게 얻을 수 <input type="number">있습니까?

보너스 읽기

• 위의 모든 항목의 jsFiddle (업데이트 됨)
• 새로운 입력 유형에 대한 Quirkmode.org 항목

WHATWG 에 따르면 유효한 숫자 입력이 아니면 값을 가져올 수 없습니다. 입력 숫자 필드의 삭제 알고리즘은 입력이 유효한 부동 소수점 숫자가 아닌 경우 브라우저가 값을 빈 문자열로 설정해야한다고 말합니다.

값 위생 알고리즘은 다음과 같다 다음 경우 값 요소의가 아닌 유효한 부동 소수점 숫자 다음 대신 빈 문자열로 설정합니다.

유형 지정 (<input type="number"> )을 브라우저에 몇 가지 작업을 요청하는 것입니다. 반면에 숫자가 아닌 입력을 캡처하여 작업을 수행하려면 이전에 시도 된 실제 텍스트 입력 필드에 의존하여 콘텐츠를 직접 구문 분석해야합니다.

W3는 동일한 사양을 가지고 있으며, 추가 :

사용자 에이전트는 사용자가 유효한 부동 소수점 숫자가 아닌 비어 있지 않은 문자열로 값을 설정하도록 허용해서는 안됩니다.

질문에 대한 답변은 아니지만 유용한 해결 방법은

edQuantity.validity.valid

ValidityState객체의 사용자가 입력 한에 대한 단서를 제공합니다. type="number"a min및 max세트 로 입력 고려

<input type="number" min="1" max="10">

우리는 항상 사용하려는 .validity.valid.

다른 속성은 보너스 정보 만 제공합니다.

User's Input  .value  .valid | .badInput  .rangeUnderflow  .rangeOverflow
============  ======  ====== | =========  ===============  ==============
""            ""      true   | false      false            false  ;valid because field not marked required
"1"           "1"     true   | false      false            false  
"10"          "10"    true   | false      false            false
"0"           "0"     false  | false      true             false  ;invalid because below min
"11"          "11"    false  | false      false            true   ;invalid because above max
"q"           ""      false  | true       false            false  ;invalid because not number
"³"           ""      false  | true       false            false  ;superscript digit 3
"٣"           ""      false  | true       false            false  ;arabic digit 3
"₃"           ""      false  | true       false            false  ;subscript digit 3

사용하기 전에 브라우저가 HTML5 유효성 검사를 지원하는지 확인해야합니다.

function ValidateElementAsNumber(element)
{
   //Public Domain: no attribution required.
   if ((element.validity) && (!element.validity.valid))
   {
      //if html5 validation says it's bad: it's bad
      return false;
   }

   //Fallback to browsers that don't yet support html5 input validation
   //Or we maybe want to perform additional validations
   var value = StrToInt(element.value);
   if (value != null)
      return true;
   else
      return false;
}

보너스

Spudly가 삭제 한 유용한 답변이 있습니다.

이를 위해 CSS :invalid선택기를 사용하십시오.

input[type=number]:invalid {
    background-color: #FFCCCC;
}

숫자가 아닌 유효한 값이 입력 될 때마다 요소가 빨간색으로 바뀌도록 트리거합니다.

에 대한 브라우저 지원은와 <input type='number'>거의 동일 :invalid하므로 문제가 없습니다.

:invalid 여기 에 대해 자세히 알아 보십시오 .

input.focus();
document.execCommand("SelectAll");
var displayValue = window.getSelection().toString();

키 코드를 기반으로 눌린 모든 키 추적

키업 이벤트를 듣고 키 코드를 기반으로 입력 된 모든 문자의 배열을 유지할 수 있다고 가정합니다. 그러나 그것은 매우 지루한 작업이며 아마도 버그가 발생하기 쉽습니다.

http://unixpapa.com/js/key.html

입력을 선택하고 선택을 문자열로 가져옵니다.

document.querySelector('input').addEventListener('input', onInput);

function onInput(){
  this.select(); 
  console.log( window.getSelection().toString() )
}

<input type='number'>

모든 크레딧 : int32_t