it-swarm.dev

HTML-Eingabefeld Force-Nummern

Ist es möglich, ein Eingabefeld zu erstellen, das den Standardeingabezeichensatz auf Zahlen in einem Mobiltelefon setzt (also das NUMERISCHE TASTATUR-PUNKT OBEN )?
Um es beispielsweise einfacher zu machen, geben Sie eine Telefonnummer in ein HTML-Formular ein.

12
user

Es ist möglich, die Eingabe auf einem "Mobiltelefon" zu beschränken

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

eingabe hier kann mit format = "* N" begrenzt werden

5
Deano

Verwenden Sie <input type="number">, um die Eingabe von Zahlen zu vereinfachen. Verwenden Sie <input type="tel">, um die Eingabe von Telefonnummern zu vereinfachen. Nicht alle Telefone unterstützen sie, aber das iPhone bietet Ihnen standardmäßig einen Ziffernblock anstelle der normalen Tastatur. Weitere Informationen finden Sie unter Die Spezifikation und In HTML5 eintauchen .

34
Brian Campbell

Sie können <input type='tel'> verwenden. Dies ist eine neue HTML5-Funktion. Ältere Browser verwenden standardmäßig ein Texteingabefeld.

4
Ned Batchelder

Sie können also entweder type="tel" oder type="numbers" verwenden.

Der Unterschied besteht darin, dass versucht wird, die Wähltastatur Ihres Telefons aufzurufen, und die andere einfach auf die Zifferneingabe Ihrer mobilen Tastatur umschaltet.

2
JeroenEijkhof

Hier ist ein Beispiel mit Javascript. Dies erlaubt nur Zahlen vom Nummernblock/den Nummern über der Tastatur und Formatierungen (Shift/Backspace/etc). Sie können auch eine setTimeout() mit einer Zeitüberschreitung von einigen Sekunden für das Ereignis onchange hinzufügen, um zu überprüfen, ob jemand nicht Zahlen in das Feld einfügt, sowie die serverseitige Überprüfung.

Beispiel

http://jsfiddle.net/vce9s/

1
Robert

Bitte sehen Sie in meinem Projekt des Cross-Browser-Filters den Wert des Texteingabeelements auf Ihrer Webseite mit Hilfe der JavaScript-Sprache: Input Key Filter . Codebeispiel:

<!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>

Siehe auch meine Seite "Benutzerdefinierter Filter:" Beispiel für den Eingabetastenfilter

1
Andrej

für mein Testen von "können Sie entweder type="tel" oder type="numbers" verwenden." type="tel" ruft auf dem iPhone nur die Zifferntastatur auf (wie das Telefon), und type="numbers" ruft die Zifferntastatur auf, die auf Zahlen und Symbole umgeschaltet ist, sodass beide Funktionen nur von Ihrer Anwendung abhängen. Für mich brauche ich nur Zahlen, also habe ich type="tel" verwendet, um die Bedienung zu vereinfachen, und es hat großartig funktioniert!

0
Matt Carroll