원시 가치를 얻는 방법

원시 가치를 얻는 방법 들?

---

필드 의 "실제" 값을 얻으려면 어떻게 <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"입력을 고려 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

You'll have to ensure that the the browser supports HTML5 validation before using it:

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;
}

Bonus

Spudly has a useful answer that he deleted:

Just use the CSS :invalid selector for this.

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

This will trigger your element to turn red whenever a non-numeric valid is entered.

Browser support for <input type='number'> is about the same as :invalid, so no problem there.

Read more about :invalid here.

---

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

---

Track all pressed keys based on their key codes

I suppose one could listen to the keyup events and keep an array of all characters entered, based on their keycodes. But it's a pretty tedious task and probably prone to bugs.

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

Select the input and get the selection as a string

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

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

<input type='number'>

All credit to: int32_t

참고 URL : https://stackoverflow.com/questions/18852244/how-to-get-the-raw-value-an-input-type-number-field