วิธีการสร้างเครื่องมือเลือกหมายเลขโทรศัพท์แบบง่าย
เบอร์โทรศัพท์, นอกเหนือจากชื่อและอีเมลเป็นข้อมูลติดต่อที่ใช้บ่อยที่สุดในรูปแบบออนไลน์ โดยปกติแล้วฟิลด์หมายเลขโทรศัพท์จะออกแบบในลักษณะที่ต้องการให้ผู้ใช้พิมพ์ตัวเลขในการใช้แป้นพิมพ์ วิธีนี้ส่งผลให้เกิดการป้อนข้อมูลที่ไม่ถูกต้องบ่อยครั้ง.
ไปยัง ลดข้อผิดพลาดการป้อนข้อมูลของผู้ใช้ และปรับปรุงประสบการณ์ผู้ใช้ในเว็บไซต์ของคุณคุณสามารถสร้าง GUI ที่ช่วยให้ผู้ใช้สามารถป้อนหมายเลขโทรศัพท์ได้อย่างรวดเร็วในลักษณะที่คล้ายคลึงกับเครื่องมือเลือกวันที่.
ในบทช่วยสอนนี้คุณจะเห็นวิธีการ เพิ่มตัวเลือกหมายเลขโทรศัพท์แบบง่ายไปยังช่องใส่. เราจะใช้ HTML5, CSS3 และ JavaScript เพื่อไปยัง GUI ที่คุณสามารถดูและทดสอบในตัวอย่างด้านล่าง นอกจากนี้เราจะใช้การแสดงผลปกติเพื่อให้แน่ใจว่าผู้ใช้ป้อนหมายเลขโทรศัพท์ที่ถูกต้องจริงๆ.
1. สร้างฟิลด์หมายเลขโทรศัพท์
เป็นครั้งแรก, สร้างฟิลด์อินพุต ด้วยไอคอนการหมุนด้านขวาที่จะเปิดหน้าจอการโทรเมื่อคลิก ไอคอนหมุนหมายเลขดูเหมือนกับกล่องดำ 9 กล่องจัดเรียงแบบ 3 โดย 3 ต้องชอบสิ่งที่คุณเห็นบนโทรศัพท์ปกติ.
ฉันกำลังใช้ โทร
ประเภทอินพุตสำหรับซีแมนทิกส์ HTML5 ที่เหมาะสม แต่คุณสามารถใช้ ข้อความ
ประเภทอินพุตถ้าคุณต้องการ.
2. สร้างหน้าจอโทรออก
หน้าจอโทรออก คือ ตารางของตัวเลข จาก 0 ถึง 9 บวกอักขระพิเศษบางตัว มันสามารถทำด้วย ทั้ง HTML ที่นี่ฉันจะแสดงวิธีสร้างตารางหน้าจอโทรออกใน JavaScript แน่นอนว่าคุณสามารถเพิ่มตารางได้โดยตรงในซอร์สโค้ด HTML หากคุณต้องการให้เป็นเช่นนั้น. ขั้นแรกให้สร้างใหม่ เพิ่ม ทั้งสอง แถวสุดท้ายนั้นแตกต่างกันเนื่องจากประกอบด้วย อักขระพิเศษสองตัว, หากต้องการสร้างแถวสุดท้ายในหน้าจอการโทรให้เพิ่มรายการต่อไปนี้ หน้าจอการโทรเสร็จสมบูรณ์แล้ว, เพิ่มลงใน เพื่อให้น่าสนใจยิ่งขึ้น, สไตล์หน้าจอโทรออก ด้วย CSS. คุณไม่จำเป็นต้องยึดติดกับสไตล์ของฉัน แต่อย่าลืม เพิ่ม ก่อนอื่นเพิ่ม จากนั้นเพิ่มตัวจัดการเหตุการณ์คลิกไปที่ไอคอนการโทร ด้วยจาวาสคริปต์ ไปยัง สลับการแสดงผล ของหน้าจอโทรออก. ในการทำเช่นนั้นคุณจะต้องใช้ข้อมูลข้างต้น เพิ่มฟังก์ชั่นที่กำหนดเองที่ ใส่ตัวเลขลงในช่องหมายเลขโทรศัพท์ เมื่อคลิกของเซลล์ของหน้าจอการโทร. ตอนนี้คุณมี หน้าจอหมุนใช้งาน ไปยังช่องหมายเลขโทรศัพท์. เพื่อให้ทันกับ CSS ให้เปลี่ยนสีพื้นหลังของตัวเลขใน เพิ่ม การตรวจสอบ regex ง่าย เพื่อตรวจสอบหมายเลขโทรศัพท์ในขณะที่ผู้ใช้ ป้อนตัวเลขลงในฟิลด์อินพุต. ตามกฎการตรวจสอบที่ฉันใช้หมายเลขโทรศัพท์สามารถเริ่มต้นด้วยหลักหรือ คุณสามารถเห็นการสร้างภาพของนิพจน์ปกติของฉันบนหน้าจอด้านล่างที่สร้างด้วยแอพ Debuggex. คุณสามารถตรวจสอบหมายเลขโทรศัพท์ตามรูปแบบหมายเลขโทรศัพท์ของประเทศหรือภูมิภาคของคุณ. สร้างวัตถุนิพจน์ปกติใหม่และเก็บไว้ใน เมื่ออินพุตไม่ตรวจสอบความถูกต้อง ฉัน เพิ่มเส้นขอบสีแดง ไปยังฟิลด์อินพุตเมื่ออินพุตไม่ถูกต้อง แต่คุณสามารถแจ้งผู้ใช้ด้วยวิธีอื่นเช่นมีข้อความแสดงข้อผิดพลาด. โปรดทราบว่าฉันยังเพิ่ม การตรวจสอบเพิ่มเติม สำหรับอักขระสูงสุด (ไม่เกิน 15) โดยใช้ ของคุณ เครื่องมือเลือกหมายเลขโทรศัพท์ พร้อมใช้งานแล้วลองดูการสาธิตขั้นสุดท้ายด้านล่าง. หรือ JavaScript.
'ตาราง'
องค์ประกอบใน 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:querySelector ()
วิธีการ เลือกภาชนะappendChild ()
วิธีการ ต่อท้ายหน้าจอโทรออก - จัดขึ้นใน หมุน
ตัวแปร - กับคอนเทนเนอร์ document.querySelector ( '# dialWrapper') appendChild (สายตรง).
3. จัดรูปแบบ Dial Screen
ใช้เลือก: 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);
: เลื่อน
และ :คล่องแคล่ว
(เมื่อผู้ใช้คลิกที่) สถานะ. .dialDigit: โฮเวอร์ background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. เพิ่มการตรวจสอบนิพจน์ปกติ
+
ตัวละครและยอมรับ -
ตัวละครในภายหลัง.แบบแผน
ตัวแปร. สร้างแบบกำหนดเองด้วย ตรวจสอบ ()
ฟังก์ชั่นที่ตรวจสอบว่าหมายเลขโทรศัพท์ที่ป้อน สอดคล้องกับการแสดงออกปกติ, และถ้ามันเป็น อย่างน้อย 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
ตัวแปร.ถ้า
คำแถลง. ฟังก์ชัน dialNumber () var val = phoneNo.value + this.textContent; // อนุญาตให้ใช้อักขระสูงสุดได้ 15 ถ้า (val.length> 15) ส่งคืนค่าเท็จ ตรวจสอบ (Val); phoneNo.value = val;