วิธีการสร้างเครื่องมือเลือกหมายเลขโทรศัพท์แบบง่าย

เบอร์โทรศัพท์, นอกเหนือจากชื่อและอีเมลเป็นข้อมูลติดต่อที่ใช้บ่อยที่สุดในรูปแบบออนไลน์ โดยปกติแล้วฟิลด์หมายเลขโทรศัพท์จะออกแบบในลักษณะที่ต้องการให้ผู้ใช้พิมพ์ตัวเลขในการใช้แป้นพิมพ์ วิธีนี้ส่งผลให้เกิดการป้อนข้อมูลที่ไม่ถูกต้องบ่อยครั้ง.

ไปยัง ลดข้อผิดพลาดการป้อนข้อมูลของผู้ใช้ และปรับปรุงประสบการณ์ผู้ใช้ในเว็บไซต์ของคุณคุณสามารถสร้าง GUI ที่ช่วยให้ผู้ใช้สามารถป้อนหมายเลขโทรศัพท์ได้อย่างรวดเร็วในลักษณะที่คล้ายคลึงกับเครื่องมือเลือกวันที่.

ในบทช่วยสอนนี้คุณจะเห็นวิธีการ เพิ่มตัวเลือกหมายเลขโทรศัพท์แบบง่ายไปยังช่องใส่. เราจะใช้ HTML5, CSS3 และ JavaScript เพื่อไปยัง GUI ที่คุณสามารถดูและทดสอบในตัวอย่างด้านล่าง นอกจากนี้เราจะใช้การแสดงผลปกติเพื่อให้แน่ใจว่าผู้ใช้ป้อนหมายเลขโทรศัพท์ที่ถูกต้องจริงๆ.

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 property - ด้วยวิธีต่อไปนี้:

 (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 โดยใช้ สองวิธี DOM:

1. querySelector () วิธีการ เลือกภาชนะ
2. appendChild () วิธีการ ต่อท้ายหน้าจอโทรออก - จัดขึ้นใน หมุน ตัวแปร - กับคอนเทนเนอร์

 document.querySelector ( '# dialWrapper') appendChild (สายตรง). 

3. จัดรูปแบบ Dial Screen

เพื่อให้น่าสนใจยิ่งขึ้น, สไตล์หน้าจอโทรออก ด้วย CSS.

คุณไม่จำเป็นต้องยึดติดกับสไตล์ของฉัน แต่อย่าลืม เพิ่ม ใช้เลือก: none; คุณสมบัติเพื่อ #dial ภาชนะ เพื่อให้ในขณะที่ผู้ใช้คลิกที่ตัวเลขข้อความ เคอร์เซอร์จะไม่ถูกเลือก.

 #dial width: 200px; ความสูง: 200px; การยุบชายแดน: การล่มสลาย; จัดข้อความ: ศูนย์; ตำแหน่ง: ญาติ; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; ผู้ใช้เลือก: ไม่มี; สี: # 000; box-shadow: 0 0 6px # 999;  .dialDigit border: 1px solid #fff; เคอร์เซอร์: ตัวชี้; สีพื้นหลัง: rgba (255,228,142, .7);  

4. แสดงหน้าจอโทรออกเมื่อคลิก

ก่อนอื่นเพิ่ม visibility: hidden; สไตล์กฎ #dial ใน CSS ด้านบน ไปยัง ซ่อนหน้าจอโทรออก โดยค่าเริ่มต้น. มันจะปรากฏขึ้นเมื่อผู้ใช้คลิกที่ไอคอนการโทร.

จากนั้นเพิ่มตัวจัดการเหตุการณ์คลิกไปที่ไอคอนการโทร ด้วยจาวาสคริปต์ ไปยัง สลับการแสดงผล ของหน้าจอโทรออก.

ในการทำเช่นนั้นคุณจะต้องใช้ข้อมูลข้างต้น querySelector () และ addEventListener () วิธีการ หลัง แนบเหตุการณ์คลิก ไปที่ไอคอนการโทรและการโทรแบบกำหนดเอง toggleDial () ฟังก์ชัน.

toggleDial () ฟังก์ชัน เปลี่ยนการมองเห็น ของหน้าจอการโทรจากที่ซ่อนเป็นมองเห็นได้และด้านหลัง.

 document.querySelector ('# dialIcon'). addEventListener ('คลิก', toggleDial); ฟังก์ชั่น toggleDial () dial.style.visibility = dial.style.visibility === 'ซ่อน' | | dial.style.visibility === "? 'มองเห็น': 'ซ่อน'; 

5. เพิ่มฟังก์ชั่น

เพิ่มฟังก์ชั่นที่กำหนดเองที่ ใส่ตัวเลขลงในช่องหมายเลขโทรศัพท์ เมื่อคลิกของเซลล์ของหน้าจอการโทร.

dialNumber () ฟังก์ชัน ต่อท้ายตัวเลขทีละหนึ่ง ไปที่ textContent คุณสมบัติของช่องใส่ที่มีเครื่องหมาย #phoneNo ระบุ.

 phoneNo = document.querySelector ('# phoneNo'); function dialNumber () phoneNo.value + = this.textContent;  dialDigits = document.querySelectorAll ('. dialDigit'); สำหรับ (var i = 0; i < dialDigits.length; i++)  dialDigits[i].addEventListener('click', dialNumber);  

ตอนนี้คุณมี หน้าจอหมุนใช้งาน ไปยังช่องหมายเลขโทรศัพท์.

เพื่อให้ทันกับ CSS ให้เปลี่ยนสีพื้นหลังของตัวเลขใน : เลื่อน และ :คล่องแคล่ว (เมื่อผู้ใช้คลิกที่) สถานะ.

 .dialDigit: โฮเวอร์ background-color: rgb (255,228,142);  .dialDigit: active background-color: # FF6478;  

6. เพิ่มการตรวจสอบนิพจน์ปกติ

เพิ่ม การตรวจสอบ regex ง่าย เพื่อตรวจสอบหมายเลขโทรศัพท์ในขณะที่ผู้ใช้ ป้อนตัวเลขลงในฟิลด์อินพุต. ตามกฎการตรวจสอบที่ฉันใช้หมายเลขโทรศัพท์สามารถเริ่มต้นด้วยหลักหรือ + ตัวละครและยอมรับ - ตัวละครในภายหลัง.

คุณสามารถเห็นการสร้างภาพของนิพจน์ปกติของฉันบนหน้าจอด้านล่างที่สร้างด้วยแอพ Debuggex.

คุณสามารถตรวจสอบหมายเลขโทรศัพท์ตามรูปแบบหมายเลขโทรศัพท์ของประเทศหรือภูมิภาคของคุณ.

สร้างวัตถุนิพจน์ปกติใหม่และเก็บไว้ใน แบบแผน ตัวแปร. สร้างแบบกำหนดเองด้วย ตรวจสอบ () ฟังก์ชั่นที่ตรวจสอบว่าหมายเลขโทรศัพท์ที่ป้อน สอดคล้องกับการแสดงออกปกติ, และถ้ามันเป็น อย่างน้อย 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;  

7. ทำการตรวจสอบความถูกต้อง

ตรวจสอบ () ฟังก์ชั่น จะต้องมีการเรียก เพื่อทำการตรวจสอบ เรียกมันจาก dialNumber () ฟังก์ชันที่คุณสร้างในขั้นตอนที่ 5 เพื่อตรวจสอบความถูกต้องของค่า phoneNo ตัวแปร.

โปรดทราบว่าฉันยังเพิ่ม การตรวจสอบเพิ่มเติม สำหรับอักขระสูงสุด (ไม่เกิน 15) โดยใช้ ถ้า คำแถลง.

 ฟังก์ชัน dialNumber () var val = phoneNo.value + this.textContent; // อนุญาตให้ใช้อักขระสูงสุดได้ 15 ถ้า (val.length> 15) ส่งคืนค่าเท็จ ตรวจสอบ (Val); phoneNo.value = val;  

ของคุณ เครื่องมือเลือกหมายเลขโทรศัพท์ พร้อมใช้งานแล้วลองดูการสาธิตขั้นสุดท้ายด้านล่าง.

วิธีสร้างบล็อกแบบคงที่โดยใช้ Cactus [OS X]

วิธีสร้างรหัสผ่านที่คาดเดายาก (และจดจำไว้)

วิธีการสร้างทางลัดเพื่อเปลี่ยนเซิร์ฟเวอร์ DNS ของคุณใน Windows

บทความต่อไป

วิธีการสร้างซอฟต์แวร์ RAID Array ใน Windows 7

บทความก่อนหน้า

วิธีสร้างทางลัดไปยัง Windows Update ใน Windows 10