Thuộc tính inputmode cho phép chúng ta hiển thị các loại bàn phím ảo nào sẽ được hiển thị trên các thiết bị có bàn phím ảo, ví dụ như iphone, điện thoại android, máy tính bảng. Các loại bàn phím ảo thường có khi ta nhấp vào 1 đầu vào đó là Số, Số điện thoại, Số thập phân, Email, Url, Tìm kiếm. Với mỗi bàn phím ảo chỉ được gắn đinh cụ thể, bản thân thiết bị sẽ được đưa ra những gợi ý tương thích với loại bàn phím ảo đó
số
Đây là loại inputmode phổ biến nhất được sử dụng để xác định loại bàn phím trong thực tế. Người dùng sẽ chỉ muốn hiển thị bàn phím số trong một số trường hợp công cụ có thể để đỡ mất nhiều thao tác không cần thiết ví dụ như mục nhập mã PIN, mã zip, số thẻ tín dụng. Có thể bạn sẽ thắc mắc tại sao lại không sử dụng type is number for rồi, thực ra với inputmode number chỉ hiện số và type là text thì ta có thể sử dụng thêm các thuộc tính inputmode="numeric" maxlength, minlength và pattern
Có nhà phát triển sẽ sử dụng type=tel để giải quyết vấn đề, nhưng nó lại không đúng về mặt ngữ nghĩa. Hơn nữa, bàn phím sẽ chỉ loại bỏ các ký tự thôi, trên ios nó vẫn hiển thị các ký tự đặc biệt, tuy nhiên ta có thể sử dụng các mẫu để loại bỏ. Ví dụ như là
Cái bút
Tin vui là
Các trình duyệt dựa trên Chromium trên Android — như Microsoft Edge, Brave và Opera — chia sẻ chung một hành vi chế độ đầu vào như Chrome
Kiếm thu nhập với kỹ năng HTML của bạn
Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.
Thuộc tính inputmode cung cấp gợi ý cho trình duyệt về loại bàn phím ảo sẽ hiển thị khi có bất kỳ or element is selected. chế độ nhập liệu có thể tùy chỉnh hiệu quả bàn phím ảo khi ghi nhớ dữ liệu cần điền cho hộp văn bản — điện thoại, email, số, v.v.
inputmode là một tính năng nhỏ nhưng rất hữu ích cho thiết bị di động khi xử lý hộp văn bản. Hãy tưởng tượng một người dùng cần nhập số điện thoại của mình vào một ứng dụng web, nhưng trong khi nhập, bàn phím mặc định được hiển thị bao gồm tất cả các bảng chữ cái và cả các ký tự đặc biệt. Do màn hình di động thường nhỏ, người dùng sẽ gặp khó khăn khi chỉ nhập số. Nhưng nếu bàn phím chỉ bao gồm số thì người dùng có thể gõ số điện thoại một cách nhanh chóng và dễ dàng.
Sử dụng thuộc tính inputmode attribute
inputmode có thể có các giá trị sau.
- không ai
- chữ
- số thập phân
- con số
- điện thoại
- Tìm kiếm
- url
Các phần tiếp theo mô tả các tùy chọn này trông như thế nào. Demo cho những điều này cũng được đưa ra
Không có bàn phím ảo — inputmode=none
Giá trị none có nghĩa là không có bàn phím ảo nào được hiển thị. Cái này dành cho trường hợp ứng dụng đang tự xử lý bàn phím ảo [chắc là tự code].
Thử nghiệm
Bàn phím tiêu chuẩn — inputmode=text
Giá trị văn bản ngụ ý bàn phím tiêu chuẩn dành riêng cho ngôn ngữ sẽ được hiển thị.
inputmode=văn bản trên Android 9
Thử nghiệm
Bàn phím số trên màn hình — inputmode=numeric
Giá trị số ngụ ý bàn phím số trên màn hình sẽ được hiển thị từ các chữ số 0 đến 9. Phím trừ có thể hiển thị hoặc không.
inputmode=numeric trên Android 9
Thử nghiệm
Bàn phím số có số thập phân — inputmode=decimal
Giá trị thập phân ngụ ý bàn phím số trên màn hình sẽ được hiển thị cùng với dấu tách thập phân cụ thể theo ngôn ngữ [". " hoặc là ","]. Phím trừ có thể hiển thị hoặc không.
inputmode=decimal trên Android 9
Thử nghiệm
Bàn phím cho đầu vào điện thoại — inputmode=tel
Giá trị tel ngụ ý bàn phím số trên màn hình với các phím dấu hoa thị [*] và dấu thăng [*] được hiển thị phù hợp để nhập điện thoại .
inputmode=tel trên Android 9
Thử nghiệm
Bàn phím để nhập liệu tìm kiếm — inputmode=search
Giá trị tìm kiếm ngụ ý bàn phím ảo được tối ưu hóa cho tìm kiếm trong đó phím "Enter" có thể được gắn nhãn là "
inputmode=search trên Android 9
Thử nghiệm
Bàn phím để nhập email — inputmode=email
Giá trị email ngụ ý rằng bàn phím ảo sẽ hiển thị ký tự @, hỗ trợ nhập email.
inputmode=email trên Android 9
Thử nghiệm
Bàn phím để nhập URL — inputmode=url
Giá trị url ngụ ý bàn phím ảo sẽ hiển thị ký tự /, giúp bạn dễ dàng nhập url.
inputmode=url trên Android 9
Thử nghiệm
Phần kết luận
Sử dụng chế độ đầu vào là điều bắt buộc khi xử lý các hộp văn bản HTML. Nó sẽ ngăn chặn rất nhiều sự thất vọng xảy ra khi người dùng nhập dữ liệu vào thiết bị di động.