Loại đầu vào HTML5 nào dành cho số điện thoại di động?

Biểu mẫu thường là cơn ác mộng trên thiết bị di động. Chúng tôi có thể làm cho quy trình trở nên dễ dàng nhất có thể bằng cách phản ứng với ngữ cảnh. Các trường đầu vào mong đợi các giá trị số phải có giao diện người dùng số. Hiển thị bàn phím số trên màn hình nhỏ rất dễ dàng trên hầu hết các nền tảng — chỉ cần sử dụng

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

8

Bàn phím số có nút lớn này thân thiện với ngón tay và sẽ giúp ngăn người dùng thoát khỏi biểu mẫu của bạn một cách thất vọng. Tuy nhiên,

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

9 không phù hợp với tất cả các số

Trên (hầu hết) màn hình lớn hơn, đầu vào số đi kèm với nút tăng/giảm. Đó là một phần giao diện người dùng hữu ích mà chúng tôi nhận được miễn phí theo mặc định. Tuy nhiên, nó làm cho loại đầu vào này hoàn toàn không phù hợp với số thẻ tín dụng, chẳng hạn

Giao diện người dùng mặc định cho đầu vào số trông giống như thế này trong tất cả các trình duyệt trên máy tính để bàn

Bản thân nó làm rõ điều này

Trạng thái ________ 20 không phù hợp với đầu vào chỉ bao gồm các số nhưng không nói đúng ra là một số. Ví dụ: sẽ không phù hợp với số thẻ tín dụng hoặc mã bưu chính của Hoa Kỳ. Một cách đơn giản để xác định xem có nên sử dụng

input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

0 hay không là xem xét liệu điều khiển đầu vào có giao diện spinbox có hợp lý hay không (e. g. , với mũi tên “lên” và “xuống”). Nhập sai số thẻ tín dụng 1 ở chữ số cuối cùng không phải là một lỗi nhỏ, nó cũng sai như nhập sai mọi chữ số. Vì vậy, sẽ không hợp lý nếu người dùng chọn số thẻ tín dụng bằng các nút “lên” và “xuống”. Khi giao diện spinbox không phù hợp,

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

0 có lẽ là lựa chọn phù hợp (có thể với thuộc tính

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

1)

Ẩn nút lên xuống dễ dàng bằng CSS

input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Điều quan trọng cần lưu ý là đây không phải là điểm khác biệt duy nhất giữa kiểu nhập số và kiểu nhập văn bản. Bạn chắc chắn nên làm theo thông số kỹ thuật về điểm này. Một số trình duyệt cũ hơn sẽ loại bỏ các số 0 đứng đầu đối với các đầu vào số, đây sẽ là một vấn đề lớn đối với mã ZIP của Hoa Kỳ. Thuộc tính

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

2 thường hữu ích bị bỏ qua khi nhập số

yes yes yes! can finally die the fiery death it deserves!

– Monica Dinculescu (@notwaldorf) ngày 13 tháng 3 năm 2018

Tại sao mọi người lại không thích một đầu vào hữu ích như vậy?

Câu trả lời thuộc về xác thực và sử dụng đầu vào cho điều sai. Đầu vào số thực hiện khử trùng đầu vào theo mặc định. Nếu người dùng nhập bất cứ thứ gì không phải là số hợp lệ, giá trị sẽ bằng một chuỗi trống — bất kể người dùng có thể nhìn thấy gì trên màn hình

Việc khử trùng đầu vào này có thể khiến các nhà phát triển gặp khó khăn và không có cách nào để tắt nó. Nếu bạn muốn cho phép đầu vào không phải là số hợp lệ, đừng sử dụng

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

9

Nhập số trong Chrome. Đây có thể là đầu vào hợp lệ cho trường hợp sử dụng của bạn, nhưng nó không hợp pháp trong mắt đầu vào số.

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

Đây có thể không phải là những gì bạn mong đợi bằng trực giác. Tuy nhiên, nếu bạn tuân theo thông số kỹ thuật và chỉ sử dụng đầu vào số cho mục đích mà nó được thiết kế — số thực tế — hành vi này không có vấn đề gì

Các lựa chọn thay thế nhập số

giải pháp iOS. Sử dụng thuộc tính `pattern` trên kiểu nhập văn bản

Trên thiết bị iOS, sử dụng thuộc tính

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

1 với giá trị

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

5 sẽ hiển thị bàn phím số. Điều này chỉ hoạt động với mẫu chính xác này — bạn không thể cho phép thêm bất kỳ ký tự nào

credit card number: 

iOS với thuộc tính

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

1

Hãy nhớ rằng iPhone sẽ không cho phép người dùng chuyển đổi loại bàn phím khi bàn phím này được hiển thị. Đảm bảo rằng đây là những phím duy nhất họ cần để điền thông tin nhập chính xác

Nếu bạn muốn hiển thị bàn phím gồm các phím số lớn trên iOS, bạn cần sử dụng thuộc tính

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

1 ngay cả khi nhập số. Nếu không, bạn sẽ nhận được các nút nhỏ và thân thiện với ngón tay

bàn phím iOS cho

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

8

Một giải pháp tốt hơn. `chế độ đầu vào`

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

9 đã tồn tại được vài năm và cuối cùng đã được Chrome triển khai kể từ phiên bản 66

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari6695No79No

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari108< . 2-12. 510710812.2-12.5

Để được hỗ trợ rộng rãi nhất có thể, nó có thể được kết hợp với thuộc tính

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

1 cho iOS

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

2

Điều này cho phép các nhà phát triển toàn quyền kiểm soát giao diện người dùng di động mà không cần thêm bất kỳ hành lý nào. Nó làm cho giao diện người dùng thân thiện với ngón tay đồng thời linh hoạt hơn thuộc tính

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

1 vì chúng tôi có thể cho phép bất kỳ ký tự nào chúng tôi thích. Nó kiểm soát một thứ — và một thứ duy nhất.

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

9 là một giải pháp tuyệt vời cho những trường hợp không phù hợp khi sử dụng

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

9

Một số người sẽ tiến xa hơn và từ bỏ hoàn toàn

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

9 khi

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

9 được hỗ trợ tốt hơn. Tôi không tin điều đó là khôn ngoan, nhưng

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

9 có thể có vấn đề

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

6Trái ngược với mắt người, cánh đồng trống rỗng…

Nếu bạn muốn cảnh báo rõ ràng về các đầu vào số trống, bạn sẽ cần sử dụng

var numberinput = document.querySelector('input[type="number"]')
numberinput.value // will be ""

7

Theo Google, người dùng từ bỏ mua hàng trên thiết bị di động nhiều gấp đôi so với máy tính để bàn. Doanh số bán hàng trên điện thoại chỉ chiếm 1/3 tổng số giao dịch mua hàng trực tuyến đã hoàn thành. Rõ ràng mọi người không chịu được việc dò dẫm trong các biểu mẫu được thiết kế tồi và chọc ngoáy vào những thông tin đầu vào nhỏ. Nhập dữ liệu cần phải dễ dàng. Mặc dù hỗ trợ trình duyệt hiện đang ở mức thấp, nhưng chúng tôi chỉ thực sự chờ đợi trên trình duyệt dành cho thiết bị di động. Hỗ trợ máy tính để bàn phần lớn không liên quan. Các yếu tố đầu vào do HTML5 giới thiệu rất tuyệt, nhưng chúng bỏ sót một số trường hợp cạnh. Điều này có thể lấp đầy một số khoảng trống

Loại đầu vào HTML 5 nào dành cho số điện thoại di động?

Làm cách nào để mã số điện thoại di động trong HTML?

Làm cách nào để xác thực số điện thoại di động trong HTML?

Số có phải là loại đầu vào hợp lệ trong html5 không?