web-dev-qa-db-ja.com

HTML入力フィールドの強制番号

携帯電話（つまりテンキーポップアップ）でデフォルトの入力文字セットを数字に設定する入力フィールドを作成することは可能ですか？
たとえば、電話番号をHTMLフォームに簡単に入力できるようにするため。

mobileuser-inputwml
12
user

「携帯電話」への入力を制限することが可能携帯電話フォーム入力は

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

ここでの入力は、format = "* N"を使用して制限できます

5
Deano

数字の入力を簡単にするには、<input type="number">を使用します。電話番号の入力を簡単にするには、<input type="tel">を使用します。すべての電話がそれらをサポートするわけではありませんが、iPhoneは少なくとも通常のキーボードの代わりにデフォルトでテンキーを提供します。詳細については、 仕様 および Dive Into HTML5 を参照してください。

34
Brian Campbell

<input type='tel'>を使用できます。これは新しいHTML5機能です。古いブラウザでは、デフォルトでテキスト入力フィールドが使用されます。

4
Ned Batchelder

したがって、次のいずれかを使用できますtype="tel"またはtype="numbers"。

違いは、電話のダイヤルキーボードを起動しようとするものと、モバイルキーボードの数字入力に切り替えるだけの場合です。

2
JeroenEijkhof

JavaScript言語を使用したWebページ上のテキスト入力要素の値のクロスブラウザーフィルターの私のプロジェクトを参照してください： 入力キーフィルター 。コード例：

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

私のページも参照してください "カスタムフィルター："入力キーフィルターの例

1
Andrej

これがJavascriptの例です。これにより、テンキー/キーパッド上部の数字とフォーマッター（シフト/バックスペースなど）からの数字のみが許可されます。 onchangeイベントにsetTimeout()を追加して、サーバー側の検証だけでなく、誰かがフィールドに数字以外を貼り付けた場合にチェックすることもできます。

例

http://jsfiddle.net/vce9s/

0
Robert

「type="tel"またはtype="numbers"のいずれかを使用できます」のテスト用。 iPhoneでは、type="tel"は数字のみのキーパッド（電話など）を表示し、type="numbers"は数字と記号に切り替えられた数字キーパッドを表示するため、どちらも機能します。アプリケーションによって異なります。私にとっては数字だけが必要なので、使いやすさのためにtype="tel"を使用しましたが、うまくいきました。

0
Matt Carroll