web-dev-qa-db-fra.com

Numéros de force du champ de saisie HTML

Est-il possible de créer un champ de saisie définissant le jeu de caractères de saisie par défaut en chiffres sur un téléphone mobile (donc le NUMERICAL KEYBOARD POPS UP )?
Par exemple, pour faciliter la tâche, entrez un numéro de téléphone dans un formulaire HTML.

mobileuser-inputwml
12
user

Il est possible de limiter la saisie sur un "téléphone mobile". La saisie du formulaire du téléphone mobile utilise

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">

l'entrée ici peut être limitée en utilisant format = "* N"

5
Deano

Pour faciliter la saisie de chiffres, utilisez <input type="number">. Pour faciliter la saisie des numéros de téléphone, utilisez <input type="tel">. Tous les téléphones ne les prendront pas en charge, mais l'iPhone au moins vous fournira un clavier numérique par défaut au lieu du clavier normal. Voir les spécifications et Plongez dans HTML5 pour plus d'informations.

34
Brian Campbell

Vous pouvez utiliser <input type='tel'>. Ceci est une nouvelle fonctionnalité HTML5. Les anciens navigateurs utiliseront simplement par défaut un champ de saisie de texte.

4
Ned Batchelder

Vous pouvez donc utiliser type="tel" ou type="numbers".

La différence est que l’on essaie d’afficher le clavier de votre téléphone et que l’autre bascule simplement sur la saisie des chiffres de votre clavier mobile.

2
JeroenEijkhof

Voici un exemple avec Javascript. Cela permettra uniquement les numéros du pavé numérique/numéros en haut du clavier, et les formateurs (shift/backspace/etc). Vous pouvez également envisager d’ajouter une setTimeout(), avec un délai de quelques secondes, à vérifier pour l’événement onchange au cas où une personne collerait des nombres non numériques dans le champ ainsi que la validation côté serveur.

Exemple

http://jsfiddle.net/vce9s/

1
Robert

S'il vous plaît voir mon projet du filtre multi-navigateur de la valeur de l'élément d'entrée de texte sur votre page Web en utilisant le langage JavaScript: Filtre clé d'entrée . Exemple de code:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
        <meta name="author" content="Andrej Hristoliubov [email protected]">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        
        <!-- For compatibility of IE browser with audio element in the beep() function.
        https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        
        <link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">           
        <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
        <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
        
</head>
<body>
        <h1>Phone number</h1>
        Please type a phone number in the +**(***)***-**-** format. Example: +1(23)456-78-90
        <br/>
        <input id="PhoneNumber" value="+()--">
        <script>
                function getArrayPhoneNumber(value){
                        if (typeof value == 'undefined')
                                value = document.getElementById("PhoneNumber").value;
                        return value.match(/^(\+?\d*)\((\d*)\)(\d*)-?(\d*)-?(\d*)$/);
                }
                
                function getPhoneNumber(){
                        var arrayPhoneNumber = getArrayPhoneNumber();
                        if(!arrayPhoneNumber)
                                return "";
                                
                        var phoneNumber = arrayPhoneNumber[1] + arrayPhoneNumber[2] + arrayPhoneNumber[3] + arrayPhoneNumber[4] + arrayPhoneNumber[5];
                        return phoneNumber;
                }
                
                inputKeyFilter.Create("PhoneNumber", function(event){//onChange event
                                inputKeyFilter.RemoveMyTooltip();
                                
                                var arrayPhoneNumber = getArrayPhoneNumber();
                                if(!arrayPhoneNumber || (arrayPhoneNumber.length != 6)){
                                        document.getElementById("NewPhoneNumber").innerHTML = "Incorrect format of the phone number";
                                        return;
                                }
                                
                                var elementNewPhoneNumber = document.getElementById("NewPhoneNumber");
                                var phoneNumber = getPhoneNumber();
                                if(inputKeyFilter.isNaN(phoneNumber, this)){
                                        elementNewPhoneNumber.innerHTML = "";
                                        return;
                                }
                                elementNewPhoneNumber.innerHTML = phoneNumber;
                        }
                        , function(elementInput, value){//customFilter
                                var arrayPhoneNumber = getArrayPhoneNumber(value);
                                if(arrayPhoneNumber == null){
                                        inputKeyFilter.TextAdd(isRussian() ?
                                                        "Недопустимый формат телефонного номера. Например: +1(234)56-78-90"
                                                        : "Incorrect format of the phone number. Example: +1(234)56-78-90"
                                                , elementInput);
                                        if(elementInput.value == "")
                                                elementInput.value = elementInput.defaultValue;
                                        return false;
                                }
                                return true;
                        }
                        
                        //onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
                        , function(event){ inputKeyFilter.isNaN(parseInt(getPhoneNumber()), this); }
                );
        </script>
         New phone number: <span id="NewPhoneNumber"></span>
</body>
</html>

Voir aussi ma page "Filtre personnalisé:" exemple de filtre de clé d'entrée

1
Andrej

pour mon test de "vous pouvez utiliser soit type="tel" ou type="numbers"." sur iPhone type="tel" affiche les chiffres uniquement avec le clavier (comme le téléphone) et type="numbers" appelle le clavier numérique commuté en chiffres et symboles. Pour moi, je n’ai besoin que de chiffres et j’ai utilisé type="tel" pour plus de facilité et c’est très bien!

0
Matt Carroll