簡単な電話番号ピッカーを作成する方法
電話番号, 名前や電子メールのほかに、オンラインフォームで最も頻繁に使用される連絡先情報があります。電話番号フィールドは通常、ユーザーが自分のキーボードを使用して番号を入力する必要があるように設計されています。この方法はしばしば不正確なデータ入力をもたらす。.
に ユーザー入力ミスを減らす あなたのサイトのユーザーエクスペリエンスを向上させるには、 GUI これにより、ユーザーは日付選択機能に似た方法で、自分の電話番号をすばやく入力できます。.
このチュートリアルでは、次の方法について説明します。 単純な電話番号ピッカーを入力フィールドに追加する. HTML5、CSS3、およびJavaScriptを使用して、以下のデモで表示およびテストできるGUIにアクセスします。ユーザーが実際に有効な電話番号を確実に入力できるように、正規表現も使用します。.
1.電話番号フィールドを作成します。
最初, 入力フィールドを作成する 右側にダイヤルアイコンがあり、クリックするとダイヤル画面が開きます。ダイヤルアイコンは、3×3で配置された9つのブラックボックスのように見えます。通常の電話で見られるものと同じである必要があります。.
私は使っています 電話 適切なHTML5セマンティクスの入力タイプですが、 テキスト 必要に応じて入力タイプ.
2.ダイヤル画面を作成する
の ダイヤル画面 です 数字の格子 0から9といくつかの特殊文字。それはと作ることができます HTMLのどちらか ここでは、JavaScriptでダイヤルスクリーンテーブルを作成する方法を紹介します。そのようにしたければ、もちろん、HTMLソースコードに直接テーブルを追加することができます。. まず、新しいを作成します を追加 二つ 最後の行は、で構成されているので異なります 2つの特殊文字, ダイヤル画面の最後の行を作成するには、次の行を追加します。 の ダイヤル画面が完成しました, に追加 より魅力的にするために, ダイヤル画面のスタイル CSSを使って. あなたは必ずしも私のスタイルにこだわる必要はありませんが、忘れないでください 追加する まず、 次に、クリックアイコンをダイヤルアイコンに追加します。 JavaScriptを使って に 可視性を切り替える ダイヤル画面の. そのためには、前述のものを使う必要があります。 の カスタム関数を追加する 電話番号フィールドに数字を入力する ダイヤル画面のセルをクリックして. の 今、あなたは 作業ダイヤル画面 電話番号フィールドを入力する. CSSに追いつくために、それらの数字の背景色を変更します。 を追加 単純な正規表現の検証 ユーザーが電話番号を検証します。 入力フィールドに数字を入力します. 私が使っている検証規則によると、電話番号は数字か数字のどちらかでしか始まらない。 Debuggexアプリで作成した下のスクリーンショットで、私の正規表現の視覚化を見ることができます。. あなたの国や地域の電話番号のフォーマットに従って電話番号を検証することもできます。. 新しい正規表現オブジェクトを作成し、それを 入力が検証されない場合、 私は 赤い枠線を追加する 入力が無効な場合は入力フィールドに入力しますが、エラーメッセージなど、他の方法でユーザーに通知することもできます。. の 私も追加したことに注意してください 追加の検証 を使用して最大文字数（15文字以下）にする きみの 電話番号ピッカー 準備が整いました。下記の最終デモをチェックしてください。. またはJavaScript.
'表' の要素 DOM を使用して createElement（） 方法。またそれを与える 「ダイヤル」 識別子. / *ダイヤル画面を作成する* / var dial = document.createElement（ 'table'）; dial.id = 'dial';
にとって ループ それと共にダイヤルテーブルの4列を挿入するため。その後、各行について, 他を走らせる にとって ループ 行ごとに3つのセルを追加するため. 各セルに印を付ける とともに 'dialDigit' クラス. （var rowNum = 0; rowNumの場合） < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
にとって 上記のループはダイヤルテーブルのセルに入るディジットを計算します - の値 cell.textContent プロパティ - 次のように： （colNum + 1）+（rowNum * 3）/ *最初の行* /（0 + 1）+（0 * 3）= 1（1 + 1）+（0 * 3）= 2（2 + 1）+（ 0 * 3）= 3 / * 2行目* /（0 + 1）+（1 * 3）= 4（1 + 1）+（1 * 3）= 5（2 + 1）+（1 * 3）= 6 / *など* /
- そして + 地域コードを識別するために電話番号の形式で使用されるもの、およびその数字 0.もし 内側への陳述 にとって ループ. （var rowNum = 0; rowNumの場合） < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper 手順1で作成したHTMLコンテナ 2つのDOMメソッド：querySelector（） メソッド コンテナを選択appendChild（） メソッド ダイヤル画面を追加する - で開催された ダイヤルする 変数 - コンテナへ document.querySelector（ '＃dialWrapper'）。appendChild（dial）;
3.ダイヤル画面をスタイルする
ユーザー選択：なし。 への財産 ＃ダイヤル 容器 ユーザーが数字をクリックしている間、テキストが カーソルによって選択されません. ＃ダイヤル幅：200ピクセル;高さ：200ピクセル。国境崩壊：崩壊。 text-align：center。位置：相対; -ms-user-select：なし。 -webkit-user-select：なし。 -moz-user-select：なし。ユーザー選択：なし。色：＃000;ボックスシャドウ：0 0 6px＃999; .dialDigit border：1px solid #fff;カーソル：ポインタ。背景色：rgba（255,228,142、.7）;
4.クリック時にダイヤル画面を表示する
可視性：隠されています。 スタイルルール ＃ダイヤル 上記のCSSでは に ダイヤル画面を隠す デフォルトで。ユーザーがダイヤルアイコンをクリックしたときにのみ表示されます.querySelector（） そしてその addEventListener（） メソッド後者 クリックイベントを添付する ダイヤルアイコンに移動してカスタムを呼び出します。 toggleDial（） 関数.toggleDial（） 関数 可視性を変更する ダイヤル画面の非表示から表示状態への切り替え. document.querySelector（ '＃dialIcon'）。addEventListener（ 'click'、toggleDial）; function toggleDial（）dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "？ 'visible'： 'hidden';
5.機能を追加する
番号をダイヤル（） 関数 数字を1つずつ追加します に textContent でマークされた入力フィールドのプロパティ ＃電話番号 識別子. phoneNo = document.querySelector（ '＃phoneNo'）;関数dialNumber（）phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll（ '。dialDigit'）; （var i = 0; iの場合 < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); ホバー そして ：アクティブ （ユーザーがクリックしたとき）状態. .dialDigit：hover 背景色：rgb（255,228,142）; .dialDigit：アクティブ背景色：＃FF6478;
正規表現検証を追加する
+ 文字を受け入れ、 - その後のキャラクター.
パターン 変数。カスタムを作成する 検証（） 入力された電話番号かどうかをチェックする機能 正規表現に従います, そしてそれが 8文字以上.検証（） 機能はする必要があります フィードバックを与えます ユーザーに. pattern = new RegExp（ "^（\\ + \\ d 1,2）？（\\ d + \\ - * \\ d +）* $"）; function validate（txt）//有効な電話番号として最低8文字if（！pattern.test（txt）|| txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true;
検証を実行する
検証（） 関数 呼ばれる必要があります 検証を実行するために。からそれを呼び出します 番号をダイヤル（） の値を検証するためにステップ5で作成した関数 電話番号 変数.もし ステートメント. 関数dialNumber（）var val = phoneNo.value + this.textContent; //許容される最大文字数。（val.length> 15）がfalseを返す場合は15。検証（val）; phoneNo.value = val;
