كيفية إنشاء منتقي أرقام الهاتف البسيطة

أرقام الهواتف, إلى جانب الأسماء ورسائل البريد الإلكتروني ، هي معلومات الاتصال الأكثر استخدامًا في النماذج عبر الإنترنت. عادة ما يتم تصميم حقول رقم الهاتف بطريقة تتطلب من المستخدمين كتابة الأرقام في استخدام لوحات المفاتيح الخاصة بهم. ينتج عن هذه الطريقة بشكل متكرر إدخال بيانات غير دقيق.

إلى تقليل أخطاء إدخال المستخدم وتحسين تجربة المستخدم لموقعك ، يمكنك إنشاء واجهة المستخدم الرسومية يتيح للمستخدمين إدخال رقم هواتفهم بسرعة ، بطريقة تشبه منتقي التاريخ.

في هذا البرنامج التعليمي ، سترى كيف إضافة منتقي رقم هاتف بسيط إلى حقل إدخال. سنستخدم HTML5 و CSS3 و JavaScript للوصول إلى واجهة المستخدم الرسومية التي يمكنك رؤيتها واختبارها في العرض التوضيحي أدناه. سنستخدم أيضًا التعبيرات المعتادة للتأكد من أن المستخدمين يدخلون حقًا رقم هاتف صالحًا.

1. إنشاء حقل رقم الهاتف

أول, إنشاء حقل الإدخال مع رمز الاتصال على اليمين الذي سيفتح شاشة الاتصال عند النقر. يبدو رمز الاتصال الهاتفي تمامًا مثل 9 مربعات سوداء ، مرتبة 3 × 3 ، ويجب أن تحب ما تراه على هاتف عادي.

أنا أستخدم الهاتف نوع الإدخال لدلالات HTML5 المناسبة ، ولكن يمكنك أيضًا استخدام نص نوع الإدخال إذا كنت تريد.

2. إنشاء شاشة الطلب

ال شاشة الاتصال الهاتفي هو شبكة من الأرقام من 0 إلى 9 بالإضافة إلى بعض الشخصيات الخاصة. يمكن أن يكون مع إما HTML

هنا ، سأريك كيفية إنشاء جدول شاشة الاتصال في JavaScript. يمكنك بالطبع إضافة الجدول مباشرةً في شفرة مصدر HTML إذا كنت تفضل ذلك.

أولا ، إنشاء جديد 'الطاولة' عنصر في DOM باستخدام createElement () طريقة. اعطائها ايضا 'يتصل' معرف.

 / * إنشاء شاشة الطلب * / var dial = document.createElement ('table') ؛ dial.id = 'dial'؛ 

أضف إلى عن على عقدة لإدراج الصفوف الأربعة من جدول الطلب معها. ثم ، لكل صف, تشغيل آخر إلى عن على عقدة من أجل إضافة ثلاث خلايا في كل صف. بمناسبة كل خلية مع ال "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 / * الصف الثاني * / (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 حاوية HTML التي قمت بإنشائها في الخطوة 1 باستخدام طريقتان دوم:

1. ال querySelector () طريقة ل حدد الحاوية
2. ال إلحاق الطفل() طريقة ل إلحاق شاشة الاتصال الهاتفي - عقدت في يتصل متغير - إلى الحاوية

 document.querySelector ( '# dialWrapper') appendChild (الطلب)؛ 

3. نمط شاشة الطلب

لجعلها أكثر جاذبية, نمط شاشة الاتصال الهاتفي مع CSS.

ليس عليك بالضرورة أن تلتزم بأسلوبي ، لكن لا تنسى ذلك إضافة المستخدم تحديد: لا شيء؛ الملكية ل #يتصل حاوية بحيث أثناء قيام المستخدم بالنقر فوق الأرقام ، النص لن تحصل على اختيار من قبل المؤشر.

 #dial width: 200px؛ الارتفاع: 200 بكسل ؛ انهيار الحدود: الانهيار ؛ محاذاة النص: المركز ؛ الموقف: نسبي -ms-user-select: لا شيء ؛ -Webkit-user-select: لا شيء ؛ -Moz-user-select: لا شيء ؛ اختيار المستخدم: لا شيء ؛ اللون: # 000 ؛ box-shadow: 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 === "؟" مرئي ":" مخفي "؛ 

5. إضافة وظيفة

إضافة وظيفة مخصصة ذلك أرقام المدخلات في حقل رقم الهاتف عند النقر فوق خلايا شاشة الطلب.

ال dialNumber () وظيفة إلحاق الأرقام واحدًا تلو الآخر إلى محتوى النص خاصية حقل الإدخال مع علامة #رقم الهاتف معرف.

 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);  

الآن ، لديك تعمل شاشة الاتصال الهاتفي لإدخال حقل رقم الهاتف.

لمواكبة CSS ، قم بتغيير لون خلفية الأرقام الموجودة بها :يحوم و :نشيط (عندما ينقر المستخدم عليها).

 .dialDigit: hover background-color: rgb (255،228،142)؛  .dialDigit: active background-colour: # FF6478؛  

6. إضافة التحقق من صحة التعبير العادية

أضف التحقق من صحة ريكس بسيط للتحقق من صحة رقم الهاتف أثناء المستخدم يدخل الأرقام في حقل الإدخال. وفقًا لقواعد التحقق من الصحة التي أستخدمها ، لا يمكن أن يبدأ رقم الهاتف إلا برقم أو بالرقم + شخصية ، وقبول - شخصية بعد ذلك.

يمكنك رؤية تصوُّر تعبيري العادي في عرض الشاشة أدناه الذي تم إنشاؤه باستخدام تطبيق Debuggex.

يمكنك أيضًا التحقق من صحة رقم الهاتف وفقًا لتنسيق رقم الهاتف في بلدك أو منطقتك.

قم بإنشاء كائن تعبير عادي جديد ، وقم بتخزينه في نمط متغير. أيضا إنشاء العرف التحقق من صحة () وظيفة أن يتحقق إذا كان رقم الهاتف الذي تم إدخاله يتوافق مع التعبير العادي, وإذا كان كذلك 8 أحرف على الأقل.

عندما لا يتم التحقق من صحة الإدخال ، التحقق من صحة () وظيفة يحتاج إلى إعطاء ردود الفعل للمستخدم.

أنا إضافة الحدود الحمراء إلى حقل الإدخال عندما يكون الإدخال غير صالح ، ولكن يمكنك إعلام المستخدم بطرق أخرى ، على سبيل المثال ، برسائل الخطأ.

 النمط = جديد RegExp ("^ (\\ + \\ d 1،2)؟ (\\ d + \\ - * \\ d +) * $")؛ وظيفة التحقق من صحة (النص) // ما لا يقل عن 8 أحرف للهاتف صحيح لا. إذا (! pattern.test (txt) || txt.length < 8)  phoneNo.style.border = '2px solid red'; return false;  else phoneNo.style.border = 'initial'; return true;  

7. إجراء التحقق من الصحة

ال التحقق من صحة () المهام يحتاج إلى أن يسمى من أجل إجراء التحقق من الصحة. نسميها من dialNumber () وظيفة قمت بإنشائها في الخطوة 5 من أجل التحقق من صحة قيمة رقم الهاتف متغير.

لاحظ أنني أضفت أيضًا التحقق من صحة إضافية للحد الأقصى لعدد الأحرف (لا يمكن أن يكون أكثر من 15) باستخدام إذا بيان.

 دالة dialNumber () var val = phoneNo.value + this.textContent؛ // الحد الأقصى المسموح به من الأحرف ، 15 إذا (val.length> 15) بإرجاع false التحقق من صحة (فال)؛ phoneNo.value = val؛  

ك منتقي رقم الهاتف جاهز الآن ، راجع العرض التوضيحي النهائي أدناه.

كيفية إنشاء مدونة ثابتة باستخدام الصبار [OS X]

كيفية إنشاء كلمة مرور قوية (وتذكرها)

كيفية إنشاء اختصار لتغيير خادم DNS الخاص بك في ويندوز

المادة التالية

كيفية إنشاء صفيف RAID برنامج في ويندوز 7

المقال السابق

كيفية إنشاء اختصار لتحديث ويندوز في نظام التشغيل Windows 10