ebst raweingabe aus html5 number input

in html5, dem Element erlaubt dem Benutzer, numerische Werte einzugeben. Wenn die Eingabe jedoch ungültig ist (z. B. enthält nicht numerische Zeichen), gibt seine Werteigenschaft eine leere Zeichenfolge zurück.

das Problem:

Wie können wir die RAW-Eingabe von einem Feld, einschließlich ungültiger Text? Lösung:

Während die Spezifikationen das Abrufen ungültiger Werte verhindern, gibt es keine Möglichkeit zu bestimmen, ob die Eingabe leer ist oder ungültigen Text enthält. Daher ist ein anderer Ansatz erforderlich.

alternativer Ansatz:

anstatt sich auf die Werteigenschaft zu verlassen, können wir einen Ereignishörer auf dem Eingabeelement verwenden, um die Eingabe des Benutzers in Echtzeit zu erfassen. document.getElementById ('edquantity'); NumberInput.AdDeVentListener ('Eingabe', (Ereignis) => { const rawValue = event.target.Value; if (isnan (rawValue)) { // Eingabe ist ungültiger Text; Färben Sie es rot numnInput.classList.add ('error'); } anders { // Eingabe ist eine gültige Nummer; Färben Sie es grün numberInput.classList.remove ('error'); } });

const numberInput = document.getElementById('edQuantity');

numberInput.addEventListener('input', (event) => {
  const rawValue = event.target.value;

  if (isNaN(rawValue)) {
    // Input is invalid text; color it red
    numberInput.classList.add('error');
  } else {
    // Input is a valid number; color it green
    numberInput.classList.remove('error');
  }
});