Phát hiện xem các phím có sẵn trên bàn phím ảo trên thiết bị di động hay không

Question

Tôi đang thêm một số tối ưu hóa khả năng sử dụng trên thiết bị di động vào trang web của chúng tôi. Là một phần của điều này tôi đang tinh chỉnh thuộc tính type của textfields, để cung cấp cho người dùng các công cụ nhập liệu tốt nhất cho kiểu dữ liệu dự kiến.

Một vấn đề tôi gặp phải trong thiết bị di động màn hình cảm ứng là các trình duyệt trên các hệ điều hành khác nhau và thậm chí là các trình duyệt khác nhau trên cùng một hệ điều hành, hiển thị bàn phím ảo khác nhau khi nhập loại = "số".

Safari trên iOS 4.3.3 (iPhone 4) và Chrome trên Android 2.3.4 bao gồm dấu thập phân, nhưng Firefox trên Android 2.3.4 thì không.

Tôi đã thử thêm thuộc tính bước (bước = "0,1") mà không cải thiện Firefox.

Nếu tôi không thể hiển thị dấu thập phân, tôi sẽ cần hiển thị Firefox bàn phím QWERTY đầy đủ, điều này rõ ràng sẽ không mang đến trải nghiệm người dùng tốt nhất. Nó cũng làm tăng vấn đề của trình duyệt/thiết bị sniffing. Hoặc tôi sẽ cần đặt QWERTY làm mặc định và hiển thị ô số cho nhiều thiết bị tôi có thể thực sự kiểm tra hoặc đặt bàn phím số mặc định và chuyển về QWERTY trên các thiết bị mà tôi biết điều này sẽ xảy ra, tùy chọn thứ hai trở nên kém hiệu quả hơn vì tôi không thể thử nghiệm trên mọi thiết bị được thực hiện.

Kiểm tra hỗ trợ cho kiểu đầu vào = "số" không cố định, vì rõ ràng trình duyệt hỗ trợ phần tử, nó không cung cấp đủ tùy chọn bàn phím để nhập tất cả các loại số.

Vì vậy .. Tôi đã tự hỏi liệu có ai biết cách kiểm tra sự hiện diện của một phím nhất định (chẳng hạn như dấu thập phân) trong bàn phím mà trình duyệt/HĐH gán cho kiểu đầu vào hay không khác có một số gợi ý tốt hơn, vì tôi khá mới với các thiết bị di động.

Tôi cũng nên đề cập rằng tôi đang sử dụng JavaScript ở đây, vì đây là một trang web, không phải là một ứng dụng gốc.

Xin cảm ơn :)

Answer 1

Thật không may, firefox không hỗ trợ kiểu đầu vào số. Tuy nhiên, bạn vẫn có thể thử sử dụng các thuộc tính HTML bổ sung này để tạo lời nhắc nhập trường cho người dùng nhập số

inputmode='numeric' 
pattern='[0-9]*' //this makes it show only the numbers 0-9 without all the slashes and dashes and everything. Ignore this if that's not what you want