Cách tạo bộ chọn số điện thoại đơn giản
Số điện thoại, bên cạnh tên và email, là thông tin liên lạc được sử dụng thường xuyên nhất trong các biểu mẫu trực tuyến. Các trường số điện thoại thường được thiết kế theo cách yêu cầu người dùng nhập số bằng cách sử dụng bàn phím của họ. Phương pháp này thường dẫn đến kết quả nhập dữ liệu không chính xác.
Đến giảm lỗi đầu vào của người dùng và cải thiện trải nghiệm người dùng của trang web của bạn, bạn có thể tạo một GUI cho phép người dùng nhập nhanh số điện thoại của họ, theo cách tương tự như công cụ chọn ngày.
Trong hướng dẫn này, bạn sẽ thấy cách thêm một công cụ chọn số điện thoại đơn giản vào trường nhập. Chúng tôi sẽ sử dụng HTML5, CSS3 và JavaScript để truy cập GUI mà bạn có thể xem và kiểm tra trong bản demo bên dưới. Chúng tôi cũng sẽ sử dụng các biểu thức thông thường để đảm bảo người dùng thực sự nhập số điện thoại hợp lệ.
1. Tạo trường số điện thoại
Đầu tiên, tạo một trường đầu vào với một biểu tượng quay số ở bên phải sẽ mở màn hình quay số khi nhấp. Biểu tượng quay số trông giống như 9 hộp đen, được sắp xếp 3 nhân 3, phải giống như những gì bạn thấy trên điện thoại thông thường.
Tôi đang sử dụng điện thoại loại đầu vào cho ngữ nghĩa HTML5 phù hợp, nhưng bạn cũng có thể sử dụng bản văn loại đầu vào nếu bạn muốn.
2. Tạo màn hình quay số
Các quay số màn hình Là một mạng lưới các con số từ 0 đến 9 cộng với một số ký tự đặc biệt. Nó có thể được thực hiện với hoặc là một HTML Ở đây, tôi sẽ chỉ cho bạn cách tạo bảng màn hình quay số bằng JavaScript. Tất nhiên, bạn có thể thêm bảng trực tiếp vào mã nguồn HTML nếu bạn thích nó theo cách đó. Đầu tiên, tạo một cái mới Thêm một Cả hai Hàng cuối cùng là khác nhau, vì nó bao gồm hai nhân vật đặc biệt, Để tạo hàng cuối cùng vào màn hình quay số, hãy thêm dòng sau Các màn hình quay số đã hoàn tất, thêm nó vào Để làm cho nó hấp dẫn hơn, phong cách màn hình quay số với CSS. Bạn không nhất thiết phải gắn bó với phong cách của tôi, nhưng đừng quên thêm vào Đầu tiên, thêm Sau đó, thêm trình xử lý sự kiện nhấp vào biểu tượng quay số với JavaScript đến chuyển đổi tầm nhìn của màn hình quay số. Để làm như vậy, bạn cần sử dụng như đã nói ở trên Các Thêm một chức năng tùy chỉnh nhập các chữ số vào trường số điện thoại khi nhấp vào các ô của màn hình quay số. Các Bây giờ, bạn có một màn hình quay số làm việc để nhập trường số điện thoại. Để theo kịp CSS, thay đổi màu nền của các chữ số trong chúng Thêm một xác nhận regex đơn giản để xác thực số điện thoại trong khi người dùng nhập các chữ số vào trường đầu vào. Theo quy tắc xác thực tôi sử dụng, số điện thoại chỉ có thể bắt đầu bằng một chữ số hoặc Bạn có thể thấy trực quan hóa biểu thức thông thường của tôi trên màn hình bên dưới được tạo bằng ứng dụng Debuggex. Bạn cũng có thể xác thực số điện thoại theo định dạng số điện thoại của quốc gia hoặc khu vực của bạn. Tạo một đối tượng Biểu thức chính quy mới và lưu trữ nó trong Khi đầu vào không xác thực, Tôi là thêm viền đỏ đến trường đầu vào khi đầu vào không hợp lệ, nhưng bạn có thể thông báo cho người dùng bằng các cách khác, ví dụ, với các thông báo lỗi. Các Lưu ý rằng tôi cũng đã thêm một xác nhận bổ sung cho các ký tự tối đa (không thể nhiều hơn 15) bằng cách sử dụng một Của bạn chọn số điện thoại đã sẵn sàng, hãy xem bản demo cuối cùng bên dưới. hoặc JavaScript.
'bàn' yếu tố trong DOM bằng cách sử dụng createdEuity () phương pháp. Cũng cho nó 'quay số' định danh. / * Tạo màn hình quay số * / var dial = document.createEuity ('bảng'); dial.id = 'quay số'; cho vòng lặp để chèn bốn hàng của bảng quay số với nó. Sau đó, cho mỗi hàng, chạy cái khác cho vòng lặp để thêm ba ô mỗi hàng. Đánh dấu từng ô với 'Quay số' lớp học. cho (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();
cho các vòng lặp ở trên tính toán các chữ số đi vào các ô của bảng quay số - các giá trị của cell.textContent tài sản - theo cách sau: (colNum + 1) + (rowNum * 3) / * hàng đầu * 0 * 3) = 3 / * thứ hai 6 / * vv * /
- và + được sử dụng trong các định dạng số điện thoại để xác định mã vùng và chữ số 0.nếu tuyên bố bên trong cho vòng lặp. cho (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 Bộ chứa HTML bạn đã tạo ở Bước 1 bằng cách sử dụng hai phương thức DOM:querySelector () phương pháp để chọn containerappendChild () phương pháp để nối thêm màn hình quay số - tổ chức tại quay số biến - đến container document.querySelector ('# dialWrapper'). appendChild (quay số); 
3. Tạo kiểu cho màn hình quay số
người dùng chọn: không có; tài sản cho #dial thùng đựng hàng để trong khi người dùng nhấp vào các chữ số, văn bản sẽ không được chọn bởi con trỏ. #dial chiều rộng: 200px; chiều cao: 200px; sụp đổ biên giới: sụp đổ; văn bản-align: trung tâm; vị trí: tương đối; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; người dùng chọn: không có; màu: # 000; hộp bóng: 0 0 6px # 999; .dialDigit Border: 1px solid #fff; con trỏ: con trỏ; màu nền: rgba (255,228,142, .7);
4. Hiển thị màn hình quay số khi nhấp
tầm nhìn: ẩn; quy tắc phong cách để #dial trong CSS trên đến ẩn màn hình quay số theo mặc định nó sẽ chỉ được hiển thị khi người dùng nhấp vào biểu tượng quay số.querySelector () và addEventListener () phương pháp. Cái sau đính kèm một sự kiện nhấp chuột đến biểu tượng quay số và gọi tùy chỉnh chuyển đổi () chức năng.chuyển đổi () chức năng thay đổi tầm nhìn của màn hình quay số từ ẩn đến hiển thị và quay lại. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); hàm toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "? 'hiển thị': 'hidden'; 5. Thêm chức năng
quay số() chức năng nối các chữ số một để textContent thuộc tính của trường đầu vào được đánh dấu bằng #không có điện thoại định danh. phoneNo = document.querySelector ('# phoneNo'); hàm dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelector ALL ('. dialDigit'); cho (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :bay lượn và : hoạt động (khi người dùng nhấp vào nó). .dialDigit: hover màu nền: rgb (255,228,142); .dialDigit: active màu nền: # FF6478;
6. Thêm xác thực biểu thức chính quy
+ nhân vật, và chấp nhận - nhân vật sau đó.
mẫu biến. Cũng tạo một tùy chỉnh xác thực () Chức năng kiểm tra nếu số điện thoại đã nhập tuân thủ các biểu thức chính quy, và nếu nó có ít nhất 8 kí tự.xác thực () chức năng cần phải đưa ra phản hồi cho người dùng. mẫu = RegExp mới ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); chức năng xác thực (txt) // ít nhất 8 ký tự cho số điện thoại hợp lệ số. if (! mẫu.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Thực hiện xác nhận
xác thực () chức năng cần được gọi để thực hiện xác nhận. Gọi nó từ quay số() chức năng bạn đã tạo ở Bước 5 để xác thực giá trị của không có điện thoại biến.nếu tuyên bố. hàm dialNumber () var val = phoneNo.value + this.textContent; // ký tự tối đa được phép, 15 if (val.length> 15) trả về false; xác nhận (val); phoneKhông.value = val;
