Wie kann ich Roheingaben aus einem HTML5-Zahleneingabefeld abrufen, auch wenn diese ungültig sind?

Roheingaben aus der HTML5-Zahleneingabe abrufen

In HTML5 ist der Das Element ermöglicht dem Benutzer die Eingabe numerischer Werte. Wenn die Eingabe jedoch ungültig ist (z. B. nicht numerische Zeichen enthält), gibt ihre Value-Eigenschaft eine leere Zeichenfolge zurück.

Das Problem:

Wie können wir abrufen die Roheingabe von einem Feld, einschließlich ungültigem Text?

Die Lösung:

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

Alternativer Ansatz:

Anstatt uns auf die Value-Eigenschaft zu verlassen, können wir einen Ereignis-Listener für das Eingabeelement verwenden, um das zu erfassen Benutzereingaben in Echtzeit.

Code Beispiel:

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

Dieses Skript fügt einen Ereignis-Listener an den an. Element, das den Eingabewert erfasst, wenn er sich ändert. Anschließend wird geprüft, ob der Wert eine gültige Zahl ist. Ist dies nicht der Fall, wird die Eingabe rot gefärbt. andernfalls wird es grün gefärbt.

Hinweis:

Dieser Ansatz ermöglicht es Ihnen, die Roheingabe einschließlich ungültigem Text zu erhalten, die Validierung und Behandlung ungültiger Eingaben jedoch schon Es liegt an Ihnen.

Das obige ist der detaillierte Inhalt vonWie kann ich Roheingaben aus einem HTML5-Zahleneingabefeld abrufen, auch wenn diese ungültig sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!