[Résolu] Input saisie = int

Hello

Comment peut-on obliger la saisie d'un input type text en int, c'est à dire que je ne veux pas que l('utilisateur puisse saisir une lettre, mais uniquement un chiffre de 0 - 9

Bonjour,

Un input type text obligatoirement ? Le input type number répond carrément à cette utilisation nativement (http://www.w3schools.com/html/html_form_input_types.asp)
Sinon c'est vérification à grand coup de Js je pense..
Modifié par _laurent (05 Oct 2015 - 14:57)

Merci de ta réponse,

Mais number affiche des petites flèches que je ne désire pas.
Mais le principe est le même, il me semblait bien obligatoire de passer par du JS.... un event onkeyup (ou press) qui supprimer si string... je pensé qu'avec "pattern" ou "type=number" on pouvait faire plus..

Merci.

L'input type number possède plein de qualités en plus de la sémentique comme le contrôle du format, de la taille, une échelle, un min et un max etc... et sous un terminal mobile il fait ouvrir le clavier virtuel orienté numérique plutôt que celui orienté pour le texte... et tout ça sans une ligne de code en plus

Les petites flèches sont rajoutées par le navigateur et elles sont effectivement un peu dure à virer..

Et sinon avec pattern justement tu as testé ? http://www.w3schools.com/tags/att_input_pattern.asp
Modifié par _laurent (05 Oct 2015 - 15:37)

Oui type number est très bien, le seul problème pour moi c'est les flèche, mais c'est pas grave, je vais opter pour lui.

J'ai tester Patern oui, mais le problème est qu'il fonctionne qu'avec un formulaire. moi je cherche quelque chose de dynamic. Patern empêche pas la saisie, mais l'envoi du form c'est pas mal pour "tester" le contenue lors de l'envoi.

Merci à toi en tout cas.
Modifié par JENCAL (05 Oct 2015 - 15:40)

Pattern n'entre effectivement en action que lors de l'envoi, il ne vérifie pas le motif pendant la saisie.

Onkeypress est censé être plus adapté que onkeyup pour empêcher la saisie de tout signe non désiré. IL faut faire très attention avec onkeyup car on est instinctivement trop restrictif: il faut quoi qu'il arrive autoriser les flèches, tab, home, end et d'autres touches en plus des chiffres, sous peine de complètement bloquer certains utilisateurs.

QuentinC a écrit :
Pattern n'entre effectivement en action que lors de l'envoi, il ne vérifie pas le motif pendant la saisie.

Onkeypress est censé être plus adapté que onkeyup pour empêcher la saisie de tout signe non désiré. IL faut faire très attention avec onkeyup car on est instinctivement trop restrictif: il faut quoi qu'il arrive autoriser les flèches, tab, home, end et d'autres touches en plus des chiffres, sous peine de complètement bloquer certains utilisateurs.

oui pas bête.

Mais le problème avec onkeypress, c'est que y'a une touche de décalage, je m'explique:
- J'ai un input text. j'ai un événement onkeypress dans cette input. la function javascrip derrière va additionner le chiffre saisir avec un autre, et afficher le résultat :

	document.getElementById("total").value = parseInt(document.getElementById("id_input").value) + 2;

Le problème avec onkeypress est donc que : Si je saisie 1, le total va être NaN (car la saisie été vide lorsque j'ai appuyer sur le 1) si je saisie à la suite du 1, le nombre 5, le le total sera de 3, car lors du onkeypress il n'y avait que 1, le 5 existe que lors de la relâche de la touche. ce qui entraîne un décalage. Et pour moi ce décalage n'est pas le bienvenu

je te laisse tester ici http://codepen.io/anon/pen/RWVVoe
Modifié par JENCAL (06 Oct 2015 - 12:07)

a écrit :
Mais le problème avec onkeypress, c'est que y'a une touche de décalage

En effet, je n'avais pas pensé à ça.

Je viens de faire un petit test, voilà ce qu'il faut faire :

Dans le onkeypress, on return true pour les caractères qu'on accepte et false pour ceux qu'on refuse. Attention, la propriété keyCode contient ici un code caractère et non pas un code de touche virtuel comme dans onkeydown/up.
Dans notre cas, les codes ASCII de '0' à '9' vont de 48 à 57. On n'accepte que ceux-là.
Pas besoin de se soucier des flèches, tab, enter et autres dans onkeypress, cet évènement n'est déclenché que lorsqu'on saisit des caractères affichables.

Et pour palier au problème du décalage, on continue de faire la somme dans le onkeyup, car on n'a pas le choix. Note par contre qu'on ne refuse là aucune touche.

Ne pas utiliser onkeydown pour faire le travail que onkeypress fait ici, car dans onkeydown tu dois accepter les touches fléchés, tab, enter et autres et vu que la plupart des gens n'utilisent jamais ces touches, tout le monde ou presque oublie de le faire et ça cause des problèmes de navigation très gênants pour ceux qui en ont besoin.

<!DOCTYPE HTML>
<html><head><title>Test addition</title></head><body>
<form action="">
<p><label for="nb">Nombre: </label>
<input type="text" id="nb" />
+ 10 = <span id="re" aria-live="polite">&nbsp;</span></p>
</form>
<script type="text/javascript">
var re, nb;
window.onload = function(){
re = document.getElementById('re');
nb = document.getElementById('nb');
nb.onkeypress = keyPress;
nb.onkeyup = keyUp;
};

function keyPress (e) {
e = e || window.event;
var c = e.keyCode;
return c>=48 && c<=55;
}

function keyUp (e) {
try {
re.innerHTML = parseInt(nb.value) +2;
} catch (_){}
}

</script>
</body></html>

Salut,

Les petites flèches de l'input ne sont pas trop dures à virer :

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
}

input[type=number] {
	-moz-appearance: textfield;
}

au top vos réponse, merci bien!

a écrit :
Les petites flèches de l'input ne sont pas trop dures à virer

A première vue ça a l'air de code spécifique à respectivement Chrome et Firefox, donc méfiance avec les autres. Qu'est-ce que ça donne avec IE, Edge et Safari ?