Comment récupérer l'entrée brute d'un champ de saisie numérique HTML5, même si elle est invalide ?

Récupération de l'entrée brute à partir de l'entrée numérique HTML5

En HTML5, le L'élément permet à l'utilisateur de saisir des valeurs numériques. Cependant, si l'entrée n'est pas valide (par exemple, contient des caractères non numériques), sa propriété value renvoie une chaîne vide.

Le problème :

Comment pouvons-nous récupérer l'entrée brute d'un champ, y compris le texte non valide ?

La solution :

Bien que les spécifications empêchent la récupération de valeurs non valides, il n'existe aucun moyen de déterminer si l'entrée est vide ou contient des valeurs non valides. texte. Par conséquent, une approche différente est nécessaire.

Approche alternative :

Au lieu de nous fier à la propriété value, nous pouvons utiliser un écouteur d'événement sur l'élément d'entrée pour capturer le entrée de l'utilisateur en temps réel.

Exemple de code :

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

Ce script attache un écouteur d'événement à l'élément élément qui capture la valeur d’entrée chaque fois qu’elle change. Il vérifie ensuite si la valeur est un nombre valide ; si ce n'est pas le cas, il colore l'entrée en rouge ; sinon, il le colore en vert.

Remarque :

Cette approche vous permet d'obtenir l'entrée brute, y compris le texte invalide, mais la validation et le traitement des entrées invalides sont à vous de décider.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!