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 ""
8Bà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
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
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,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 có lẽ là lựa chọn phù hợp [có thể với thuộc tínhvar numberinput = document.querySelector['input[type="number"]'] numberinput.value // will be ""
1]var numberinput = document.querySelector['input[type="number"]'] numberinput.value // will be ""
Ẩ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 ""
9var 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àocredit card number:
var numberinput = document.querySelector['input[type="number"]']
numberinput.value // will be ""
1Hã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 tayvar numberinput = document.querySelector['input[type="number"]']
numberinput.value // will be ""
8Mộ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 66Dữ 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
ChromeFirefoxIEEdgeSafari6695No79NoDi độ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 iOSvar 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 ""
9Mộ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 ""
6Nế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 ""
7Theo 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