Wie kann ich den "echten" Wert eines <input type="number">Feldes ermitteln?

Ich habe eine inputBox und verwende einen neueren HTML5-Eingabetyp number:

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

Dies wird hauptsächlich in Chrome 29 unterstützt:

Was ich jetzt brauche, ist die Fähigkeit, den "rohen" Wert zu lesen, den der Benutzer in das Eingabefeld eingegeben hat. Wenn der Benutzer eine Nummer eingegeben hat:

dann edQuantity.value = 4und alles ist gut.

Aber wenn der Benutzer ungültigen Text eingibt, möchte ich das Eingabefeld rot färben:

type="number"Wenn für ein Eingabefeld der Wert im Textfeld keine Zahl ist, wird leider valueeine leere Zeichenfolge zurückgegeben:

edQuantity.value = "" (String);

(mindestens in Chrome 29)

Wie kann ich den "rohen" Wert eines <input type="number">Steuerelements ermitteln?

Ich habe versucht, die Liste der anderen Eigenschaften des Eingabefelds in Chrome zu durchsuchen:

Ich habe nichts gesehen, was der tatsächlichen Eingabe ähnelt.

Ich konnte auch nicht feststellen, ob die Box "leer" ist oder nicht. Vielleicht hätte ich folgern können:

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

Hinweis : Sie können alles nach der horizontalen Regel ignorieren. Es ist nur Füllstoff, um die Frage zu rechtfertigen. Außerdem: Verwechseln Sie das Beispiel nicht mit der Frage. Die Antwort auf diese Frage kann aus anderen Gründen als der roten Färbung des Kästchens gewünscht werden (Ein Beispiel: Konvertieren des Textes "four"in das lateinische "4"Symbol während des onBlur-Ereignisses)

Wie kann ich den "rohen" Wert eines <input type="number">Steuerelements ermitteln?

Bonuslesung

• jsFiddle von allen oben genannten (aktualisiert)
• Quirkmode.org-Eintrag für die neuen Eingabetypen

Laut WHATWG sollten Sie den Wert nur erhalten können, wenn es sich um eine gültige numerische Eingabe handelt. Der Bereinigungsalgorithmus des Eingabezahlenfelds besagt, dass der Browser den Wert auf eine leere Zeichenfolge setzen soll, wenn die Eingabe keine gültige Gleitkommazahl ist.

Der Algorithmus zur Wertbereinigung lautet wie folgt: Wenn der Wert des Elements keine gültige Gleitkommazahl ist , setzen Sie ihn stattdessen auf die leere Zeichenfolge.

Durch Angabe des Typs ( <input type="number">) fordern Sie den Browser auf, einige Arbeiten für Sie auszuführen. Wenn Sie andererseits in der Lage sein möchten, die nicht numerische Eingabe zu erfassen und etwas damit zu tun, müssen Sie sich auf das alte und bewährte Texteingabefeld verlassen und den Inhalt selbst analysieren.

Der W3 hat auch die gleichen Spezifikationen und fügt hinzu:

Benutzeragenten dürfen dem Benutzer nicht erlauben, den Wert auf eine nicht leere Zeichenfolge zu setzen, die keine gültige Gleitkommazahl ist.

Die Frage wird nicht beantwortet, aber die nützliche Problemumgehung besteht darin, sie zu überprüfen

edQuantity.validity.valid

Das ValidityStateeines Objekts gibt Hinweise darauf, was der Benutzer eingegeben hat. Betrachten Sie eine type="number"Eingabe mit a minund maxset

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

Wir wollen immer verwenden .validity.valid.

Andere Eigenschaften geben nur Bonusinformationen:

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

Sie müssen sicherstellen, dass der Browser die HTML5-Validierung unterstützt, bevor Sie ihn verwenden:

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 hat eine nützliche Antwort, die er gelöscht hat:

Verwenden Sie dazu einfach den CSS- :invalidSelektor.

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

Dadurch wird Ihr Element rot, wenn eine nicht numerische Gültigkeit eingegeben wird.

Die Browser-Unterstützung für <input type='number'>ist ungefähr die gleiche wie :invalid, also kein Problem.

Lesen Sie mehr über :invalid hier .

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

Verfolgen Sie alle gedrückten Tasten anhand ihrer Tastencodes

Ich nehme an, man könnte die Keyup-Ereignisse abhören und eine Reihe aller eingegebenen Zeichen basierend auf ihren Keycodes beibehalten. Aber es ist eine ziemlich mühsame Aufgabe und wahrscheinlich anfällig für Fehler.

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

Wählen Sie die Eingabe und erhalten Sie die Auswahl als Zeichenfolge

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

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

<input type='number'>

Alle Gutschriften an: int32_t