web-dev-qa-db-fra.com

Ne pas autoriser la saisie de caractères alphabétiques dans un <type d'entrée = nombre />

Je dois avoir une zone de texte, où, chaque fois que vous tapez à l'intérieur devrait SEULEMENT autoriser les nombres [0-9]. J'ai utilisé type="number" qui contient la validation côté client, mais permet aussi de taper d'autres alphabets. Je peux le faire en suivant chaque raccourci clavier et en faisant correspondre les expressions rationnelles, mais je me demandais s'il était possible de restreindre la saisie à l'aide de balises HTML et de ne PAS définir de fonctions JavaScript à comparer dans chaque raccourci clavier.

Le code non suffisant pour le faire est:

    <input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">

Toute aide est appréciée.

javascripthtmlhtml5numbers
17
user79307

Vous pouvez utiliser jquery.numeric plugin.

Voir ici question similaire.

$(document).ready(function(){
   $(".numeric").numeric();
});
19
mihai.ciorobea

Essaye ça

définir la fonction javascript

fonction pour nombre autorisé avec décimal comme ci-dessous

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
    && (charCode < 48 || charCode > 57))
        return false;

    return true;
}

la fonction pour seulement permis nombre non décimal est comme ci-dessous 

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if ((charCode < 48 || charCode > 57))
        return false;

    return true;
}

Html

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" onkeypress="return isNumberKey(event)">
14
Sandip

type d'entrée = "numéro" pour obtenir le clavier numérique sur un appareil mobile

Javascript

function numbersonly(myfield, e)
        {
            var key;
            var keychar;

            if (window.event)
                key = window.event.keyCode;
            else if (e)
                key = e.which;
            else
                return true;

            keychar = String.fromCharCode(key);

            // control keys
            if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) )
                return true;

            // numbers
            else if ((("0123456789").indexOf(keychar) > -1))
                return true;

            // only one decimal point
            else if ((keychar == "."))
            {
                if (myfield.value.indexOf(keychar) > -1)
                    return false;
            }
            else
                return false;
        }

Html

<input type="number" onkeypress="return numbersonly(this, event)"/>
3
mswyss

Je remarque que la question a été postée vers 2013. Quoi qu'il en soit, maintenant, type = "number" limite les alphabets et les caractères spéciaux autres que "e", "." et '+' comme 'e' et '.' sont pris en compte pour les nombres exponentiels tels que 1.2e + 12, '.' est considéré pour les nombres décimaux.

1
Monika Tiruchanur

Vous devrez insérer votre zone de saisie dans un formulaire et avec un bouton d'envoi. La validation du formulaire a lieu lors de la soumission du formulaire. Voir une démo ici: http://jsfiddle.net/ds345/Q4muA/1/

<form>Number:
    <input type="number" name="Number" value="10">
    <br>
    <input type="submit" value="Submit" />
</form>
1
ds345

Les navigateurs se comportent différemment. Dans Chrome le code suivant:

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number">
  <input type="submit">

fonctionnera pour vous seulement s'il se trouve dans un formulaire et uniquement après que l'utilisateur a cliqué sur le bouton d'envoi 

1
Greg Neils

Si cela ne vous dérange pas d'utiliser un peu de Javascript, ceci pourrait aider JS-BIN Demo :

<input type="number" onkeyup="if(!this.checkValidity()){this.value='';alert('Please enter a number')};"/>
1
Akhil Sekharan

Essaye ça:-

 $("#txtAge").keydown(function (e) {
       if(e.key=='e' || e.key=='.' || e.key=='-')
        return false;
    });
1
user7409534

ajoutez simplement - min = "0" max = "9" onkeydown = "return false;"

<input type="number" id="txt_number" maxlength="70" name="txt_name" placeholder="Number" min="0" max="9" onkeydown="return false;">

0
Ankush Naskar