HTMLInputElement : propriété valueAsNumber

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété valueAsNumber de l'interface HTMLInputElement représente la valeur actuelle de l'élément HTML <input> sous forme de nombre ou NaN si la conversion en valeur numérique est impossible.

Cette propriété peut également être définie directement, par exemple pour définir une valeur numérique par défaut en fonction d'une condition.

Dans cet article

Valeur

Un nombre qui représente la valeur de l'élément ou NaN si la conversion en valeur numérique est impossible.

Exemples

Récupérer une valeur numérique

Dans cet exemple, le journal affiche la valeur actuelle de l'entrée number lorsqu'elle est modifiée.

HTML

Nous incluons un <input> de type number et un <label> associé, avec un conteneur <pre> pour notre sortie.

html
<label for="number">Choisissez un nombre entre 1 et 10&nbsp;:</label>

<input name="number" id="number" min="1" max="10" type="number" />

<pre id="log"></pre>

JavaScript

Le contenu de l'élément <pre> est mis à jour avec la valeur actuelle de l'élément <input> à chaque fois qu'un évènement change est déclenché.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("number");

inputElement.addEventListener("change", () => {
  logElement.innerText = `Nombre : ${inputElement.valueAsNumber}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Résultats

Si vous supprimez le nombre dans le composant, le résultat est NaN.

Récupérer une valeur de date en tant que nombre

Cet exemple montre la propriété valueAsNumber d'un <input> de type datetime-local.

HTML

Nous incluons un <input> de type datetime-local :

html
<label for="date">Choisissez une date et une heure&nbsp;:</label>

<input name="date" id="date" type="datetime-local" />

<pre id="log"></pre>

JavaScript

Lorsqu'aucune date ni heure n'est sélectionnée, la chaîne de caractères vide est convertie en NaN. À chaque sélection, un évènement change est déclenché, mettant à jour le contenu du <pre> qui affiche la HTMLInputElement.value du contrôle de formulaire comparée à cette valeur en tant que nombre.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");

logElement.innerText = `Valeur initiale : ${inputElement.valueAsNumber}`;

inputElement.addEventListener("change", () => {
  const d = new Date(inputElement.valueAsNumber);
  logElement.innerText = `${inputElement.value} se résout en ${inputElement.valueAsNumber}, \nce qui correspond à ${d.toDateString()} à ${d.toTimeString()}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

L'élément HTML <input>
La propriété HTMLInputElement.value
La propriété HTMLInputElement.valueAsDate

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 16 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLInputElement
Propriétés d'instance
Méthodes d'instance
Évènements
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript

HTMLInputElement : propriété valueAsNumber

Dans cet article

Valeur

Exemples

Récupérer une valeur numérique

HTML

JavaScript

Résultats

Récupérer une valeur de date en tant que nombre

HTML

JavaScript

Résultats

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN