Existe-t-il un moyen d'autoriser uniquement un signe négatif (ou un trait d'union) pour le premier caractère d'une balise d'entrée de type "nombre"? Il doit être de type "numéro" pour que le clavier correct apparaisse sur le mobile. Cependant, un utilisateur peut toujours saisir plusieurs signes négatifs avant de cliquer sur «Soumettre». J'ai utilisé .checkValidity () , ce qui aide, mais empêche d'entrer un signe négatif en premier lieu, sauf si je tape d'abord un nombre. Je ne peux pas valider avec .value , car cela renvoie un espace s'il n'est pas valide.
HTML
var input = document.querySelector('#input');
var value;
input.oninput = function() {
if (input.checkValidity()) {
value = input.value;
}
else{
input.value = value;
}
}
JavaScript
<input type="number" id="input">
Toute aide est appréciée. Merci!
4 Réponses :
Essayez :
<input type="number" id="input" oninput="this.value.match(/^-?\d*\.?\d*$/)||(this.value='');">
Malheureusement, cela ne permet pas à quelqu'un d'entrer d'abord le signe négatif.
@Max J'ai modifié ma réponse. Voyez si c'est ce que vous aviez en tête.
Utilisez une expression régulière personnalisée pour tester l'entrée. Un seul trait d'union au début sera autorisé.
input.oninput = function() {
if (/^[-0-9][0-9]+$/.test(input.value)) {
value = input.value;
}
else{
input.value = value;
}
}
Donc le bloc de code peut être
/^[-0-9][0-9]+$/.test(input)
Je n'ai pas testé mais je pense que aiderait.
Malheureusement, cela ne fonctionnera pas car lorsque vous utilisez .value sur un champ de saisie de type "nombre", il n'obtient que la valeur numérique valide, pas le texte entier, mais merci!
Vous pouvez utiliser une expression régulière qui ne correspond à rien d'autre que des chiffres, puis vérifier les correspondances et définir la valeur d'entrée en conséquence, à l'entrée.
<input id="myInput" type="text" />
const el = document.querySelector('#myInput');
el.value = '-';
el.addEventListener('input', e => {
const m = e.target.value.match(/\d+/g);
el.value = m === null ? '-' : `-${m}`;
});
Cela fonctionnerait avec un type "texte", mais j'en ai besoin pour un type "nombre", et JS n'obtiendra pas la valeur tant qu'il n'y aura pas de nombre valide.
Que voulez-vous dire que JS n'aura pas la valeur? Cela le fera très certainement ... Je comprends que c'est un type de texte, mais cela vous permet uniquement de taper des nombres, ce que vous pouvez simplement faire Number (val)
L'attribut HTML pattern est plutôt bien pris en charge ces jours-ci, vous pouvez donc l'utiliser pour cette validation.
Essayez de jouer avec le formulaire dans l'extrait ci-dessous - si la valeur n'est pas un nombre, une info-bulle apparaît et le formulaire ne sera pas envoyé. Pas de JS .
<form action="#"> <input type="number" id="input" pattern="^-?\d+$" oninput="this.checkValidity()"> <input type="submit"> </form>
Pour valider pendant que l'utilisateur saisit, vous aurez besoin de JS:
input:invalid {background:#f009}
<form action="#"> <input type="number" id="input" pattern="^-?\d+$"> <input type="submit"> </form>
C'est une bonne idée, mais malheureusement, j'en ai besoin pour valider immédiatement, pas lors de sa soumission. J'ai essayé ceci, et cela ne vérifie pas l'expression régulière tant qu'un nombre réel n'est pas entré.
avez-vous pensé que ce n'était peut-être pas une bonne idée? Vos utilisateurs peuvent très bien coller un nombre. S'ils ont malheureusement également copié du texte supplémentaire ou même juste un espace, alors votre script rejettera tout simplement, alors qu'ils auraient pu corriger leur entrée autrement. IMM le mieux est de faire savoir à votre utilisateur qu'il est invalide, mais ne l'effacez pas automatiquement.