web-dev-qa-db-fra.com

Comment restreindre l'utilisateur à taper des nombres à 10 chiffres dans l'élément d'entrée?

Je veux créer un champ de saisie pour le numéro de téléphone. Je crée un champ de saisie en utilisant JavaScript de manière dynamique.

<input type="text" id="phone" name="phone">

Comment limiter les utilisateurs à ne taper que des chiffres à 10 chiffres afin d'obtenir un numéro de téléphone.

javascripthtmlcss
7
Vivek Kumar

essaye ça 

<input type="text" name="country_code" pattern="[1-9]{1}[0-9]{9}">

Cela garantira

  1. C'est numérique 
  2. Ce sera un maximum de 10 caractères
  3. Le premier chiffre n'est pas zéro
9
Vinay Lodha

Utilisez maxlength

<input type="text" maxlength="10" />
5
iJade

Eh bien, j'ai créé avec succès ma propre réponse de travail.

<input type="text" id="phone" name="phone" onkeypress="phoneno()" maxlength="10">

aussi bien que

    <script>        
           function phoneno(){          
            $('#phone').keypress(function(e) {
                var a = [];
                var k = e.which;

                for (i = 48; i < 58; i++)
                    a.Push(i);

                if (!(a.indexOf(k)>=0))
                    e.preventDefault();
            });
        }
       </script>
5
Vivek Kumar

Vous pouvez utiliser maxlength pour limiter la longueur. Normalement, pour la saisie numérique, vous utiliseriez type="number", mais ceci ajoute une boîte de dialogue pour faire défiler les chiffres, ce qui est totalement inutile pour les numéros de téléphone. Vous pouvez cependant utiliser l'attribut pattern pour limiter les entrées à des nombres (et exiger 10 chiffres aussi, si vous le souhaitez):

<input type="text" maxlength="10" pattern="\d{10}" title="Please enter exactly 10 digits" />
4
Niet the Dark Absol

Ajoutez un attribut maxlength à votre entrée.

<input type="text" id="phone" name="phone" maxlength="10">

Voir cet exemple de travail sur JSFiddle.

2
Lewis Jackson

utilisez un attribut maxlength à votre entrée.

<input type="text" id="phone" name="phone" maxlength="10">

Voir la démo de violoneux ici Démo

1
Vinay Pratap Singh

Ici, toutes les sorties ci-dessus donnent un numéro à 10 chiffres, mais le champ de saisie accepte également les caractères, ce qui n’est pas la solution complète. Afin de définir uniquement les nombres à 10 chiffres, nous pouvons utiliser une balise d’entrée avec ce type comme numéro, et en ce sens, nous pouvons supprimer le tableau haut-bas en écrivant un petit code dans css qui est présenté ci-dessous avec la balise d’entrée .

 <input name="phone" maxlength="10" pattern="[1-9]{1}[0-9]{9}" class="form-control" id="mobile"  placeholder="Enter your phone Number" type="number">


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

L'extrait ci-dessous fait le travail comme prévu!

<input type="text" name="AUS" pattern="[0-9]{10}" title="You can enter only 10 digits..." />


//type="text" <!-- always -->
//name="AUS" <!-- for Australia -->
//pattern="[0-9]{10}" <!-- 10 digits from 0 to 9 -->
//title="You can enter only 10 digits..." <!-- Pops a warning when input mismatches -->
0
Jim

inclure simplement le fichier parsley.js dans votre document et dans l’élément de saisie du numéro de portable entrez ceci

data-parsley-type= "number" data-parsley-length="[10,10]" data-parsley-length-message= "Enter a Mobile Number"

vous pouvez modifier le message en fonction de vos besoins. Vous devez également initialiser le fichier parsley.js dans votre document en écrivant 

 <script type="text/javascript">

        $(document).ready(function() {
            $('form').parsley();
        });
    </script>

--- code ci-dessus dans votre document. ***

0
shubham dubey

maxlength limite le nombre de chiffres qui ne peuvent pas être supérieurs aux chiffres souhaités mais accepte moins que les chiffres souhaités. Si mobile No maxlength = "10", il n'acceptera pas 11 mais pourra accepter n'importe quoi jusqu'à 10.

0
Dharam Jindal

HTML

<input type="text" id="youridher" size="10">

Utilisez JQuery ,

SIZE = 10
$(document).ready(function() {
      $("#youridher").bind('keyup', function() { 
            if($("#youridher").val().length <= SIZE && PHONE_REGEX) {
                return true;
            }
            else {
                return false;
            }  
      });
});
0
Nilesh

alors que vous pouvez utiliser maxLength sur l’entrée, et quelques validation javascript , il sera toujours nécessaire de faire validation côté serveur de toute façon.

0
Scary Wombat

HTML

<input type="text" name="fieldName" id="fieldSelectorId">

Ce champ ne prend qu’un nombre maximum de 10 chiffres et n’accepte pas le zéro comme premier chiffre.

JQuery 

jQuery(document).ready(function () {
      jQuery("#fieldSelectorId").keypress(function (e) {
         var length = jQuery(this).val().length;
       if(length > 9) {
            return false;
       } else if(e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
       } else if((length == 0) && (e.which == 48)) {
            return false;
       }
      });
    });
0
Pradosh