Trang chủ » UI / UX » Cách tạo bộ chọn số điện thoại đơn giản

    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.

     
    Cơ sở HTML của Bộ chọn số điện thoại
    2. Tạo màn hình quay số

    Các quay số màn hìnhmộ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

    hoặc JavaScript.

    Ở đâ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 '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ố'; 

    Thêm một 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();   

    Cả hai 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 * / 

    Hàng cuối cùng là khác nhau, vì nó bao gồm hai nhân vật đặc biệt, -+ đượ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.

    Để tạo hàng cuối cùng vào màn hình quay số, hãy thêm dòng sau 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();   

    Các màn hình quay số đã hoàn tất, thêm nó vào #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:

    1. các querySelector () phương pháp để chọn container
    2. các appendChild () 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ố); 
    Bảng màn hình quay số không có kiểu dáng
    3. Tạo kiểu cho màn hình quay số

    Để 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 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);  
    Bảng màn hình quay số với kiểu dáng
    4. Hiển thị màn hình quay số khi nhấp

    Đầu tiên, thêm 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ố.

    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 querySelector ()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.

    Các 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

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

    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 :bay lượn: 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

    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 + nhân vật, và chấp nhận - nhân vật sau đó.

    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.

    Hình dung Regex từ debuggex.com

    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 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ự.

    Khi đầu vào không xác thực, xác thực () chức năng cần phải đưa ra phản hồi cho người dùng.

    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.

     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

    Các 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.

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

    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.

    © Savtec
    Thông tin hữu ích và lời khuyên phát triển web. Lập trình, thiết kế web, CSS, HTML, JAVASCRIPT. Cấu hình và cài đặt lại WINDOWS. Tạo các trang web và ứng dụng từ đầu.