Jak uzyskać „rzeczywistą” wartość <input type="number">pola?

Mam inputpudełko i używam nowszego typu wprowadzania HTML5 number:

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

Jest to obsługiwane głównie w Chrome 29:

Teraz potrzebuję możliwości odczytania „surowej” wartości wprowadzonej przez użytkownika w polu wprowadzania. Jeśli użytkownik wprowadził numer:

wtedy edQuantity.value = 4i wszystko jest w porządku.

Ale jeśli użytkownik wprowadzi nieprawidłowy tekst, chcę pokolorować pole wejściowe na czerwono:

Niestety, dla type="number"pola wejściowego, jeśli wartość w polu tekstowym nie jest liczbą, to valuezwraca pusty ciąg:

edQuantity.value = "" (String);

(przynajmniej w Chrome 29)

Jak mogę uzyskać „surową” wartość <input type="number">kontrolki?

Próbowałem przejrzeć listę innych właściwości pola wprowadzania w Chrome:

nie widziałem niczego, co przypominałoby rzeczywiste dane wejściowe.

Nie mogłem też znaleźć sposobu, aby stwierdzić, czy pudełko jest „puste” , czy nie. Może mogłem wywnioskować:

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

Uwaga : możesz zignorować wszystko po linii poziomej; to tylko wypełniacz, aby uzasadnić pytanie. Ponadto: nie myl przykładu z pytaniem. Ludzie mogą chcieć odpowiedzi na to pytanie z powodów innych niż kolorowanie ramki na czerwono (jeden przykład: konwersja tekstu "four"na "4"symbol łaciński podczas zdarzenia onBlur)

Jak mogę uzyskać „surową” wartość <input type="number">kontrolki?

Czytanie bonusowe

• jsFiddle wszystkich powyższych (zaktualizowane)
• Wpis Quirkmode.org dotyczący nowych typów danych wejściowych

Zgodnie z WHATWG nie powinieneś być w stanie uzyskać wartości, chyba że jest to prawidłowe dane liczbowe. Algorytm oczyszczania pola numeru wejściowego mówi, że przeglądarka ma ustawić wartość na pusty ciąg, jeśli dane wejściowe nie są prawidłową liczbą zmiennoprzecinkową.

Algorytm wartość dezynfekcja jest następująca: Jeśli wartość elementu nie jest ważna liczba zmiennoprzecinkowa , a następnie ustawić go na pusty ciąg zamiast.

Określając typ ( <input type="number">), prosisz przeglądarkę o wykonanie jakiejś pracy za Ciebie. Jeśli z drugiej strony chciałbyś móc przechwycić nieliczbowe dane wejściowe i coś z nimi zrobić, musiałbyś polegać na starym wypróbowanym i prawdziwym polu wprowadzania tekstu i samodzielnie przeanalizować zawartość.

W3 ma także te same specyfikacje i dodaje:

Programy użytkownika nie mogą zezwalać użytkownikowi na ustawienie wartości niepustego łańcucha, który nie jest prawidłową liczbą zmiennoprzecinkową.

Nie odpowiada na pytanie, ale użytecznym obejściem jest sprawdzenie

edQuantity.validity.valid

Element ValidityStateobiektu daje wskazówki o tym, co wprowadził użytkownik. Rozważmy dane type="number"wejściowe z a mini maxset

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

My zawsze chcemy użyć .validity.valid.

Inne właściwości podają tylko informacje o bonusie:

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

Przed użyciem musisz upewnić się, że przeglądarka obsługuje walidację 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;
}

Premia

Spudly ma przydatną odpowiedź, którą usunął:

Po prostu użyj :invaliddo tego selektora CSS .

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

Spowoduje to, że Twój element zmieni kolor na czerwony po wprowadzeniu wartości nienumerycznej.

Obsługa przeglądarki dla <input type='number'>jest mniej więcej taka sama jak :invalid, więc nie ma problemu.

Przeczytaj więcej na ten temat :invalid tutaj .

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

Śledź wszystkie wciśnięte klawisze na podstawie ich kodów klawiszy

Przypuszczam, że można by słuchać zdarzeń keyup i zachować tablicę wszystkich wprowadzonych znaków na podstawie ich kodów klawiszy. Ale jest to dość żmudne zadanie i prawdopodobnie podatne na błędy.

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

Wybierz wejście i uzyskaj wybór jako ciąg

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

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

<input type='number'>

Cały kredyt dla: int32_t