Đây có vẻ như là tính năng gây ấn tượng nhất hiện có, nhưng tôi nghĩ nó quan trọng vì mọi người đều không thích đánh máy trên thiết bị di động: Tôi ghét nó, tôi ghét nó. Trong Chrome dành cho Android (trước Chrome 43 – Beta kể từ tháng 4 năm 2015), nhà phát triển có rất ít quyền kiểm soát đối với cách trình duyệt có thể giúp người dùng nhập văn bản. Nếu hôm nay bạn đang soạn tin nhắn trên thiết bị, nội dung có thể trông giống như sau:
Hãy lưu ý rằng mọi nội dung đều được viết bằng chữ thường, ngoại trừ một số giá trị mà Android đã nhận dạng được là một tên.
Apple đã giới thiệu một thuộc tính trên HTMLInputElement và HTMLTextAreaElement có tên là tự động viết hoa trong iOS 5. Thuộc tính này cho phép tác giả trang gợi ý về cách trình duyệt hiển thị bàn phím ảo để người dùng tối ưu hoá việc nhập văn bản. Ở dạng đơn giản nhất, bạn có thể cho biết rằng một hộp văn bản sẽ tự động viết hoa chữ cái đầu tiên của mọi câu mới.
Từ Chrome 43, Chrome sẽ hỗ trợ thuộc tính tự động viết hoa trên cả HTMLInputElement và HTMLTextAreaElement, nhờ đó, bạn có thể kiểm soát hành vi tự động viết hoa của bàn phím ảo và đưa bàn phím ảo vào cùng dòng với Safari trên iOS.
tự động viết hoa sẽ chỉ áp dụng cho các HTMLInputElement có thuộc tính type được đặt thành: type="text", type="search", type="url", type="tel", type="email" hoặc type="password". Giá trị mặc định là không được tự động viết hoa.
Dưới đây là một ví dụ đơn giản giúp bạn tự động viết hoa các câu trong một vùng văn bản:
<textarea autocapitalize="sentences">
Tính năng tự động viết hoa có thể lấy những giá trị nào?
Bảng sau đây trình bày các trạng thái của một phần tử đầu vào:
| Tiểu bang | Từ khoá | |
|---|---|---|
<input><input autocapitalize=off>
|
Không viết hoa | không có [mặc định] |
| đang tắt | ||
<input autocapitalize=characters> |
Viết hoa ký tự | ký tự |
<input autocapitalize=words> |
Viết hoa từ | các từ |
<input autocapitalize=sentences> |
Viết hoa câu | câu |
Đối với HTMLInputElement, giá trị mặc định không hợp lệ là Nguyên tắc viết hoa trong trường hợp loại của thành phần là type=text hoặc type=search. Nếu không thì giá trị mặc định là Không viết hoa.
<input autocapitalize="simon">sẽ là một trường văn bản có Chữ viết hoa<input type="email" autocapitalize="simon">sẽ là trường văn bản Không viết hoa.<input>sẽ là trường văn bản Không viết hoa.
Đối với HTMLTextAreaElement, giá trị mặc định không hợp lệ là Sentences
Capitalization (Viết hoa văn bản). Đây là một thay đổi so với hành vi mặc định.
<textarea autocapitalize="terry"></textarea>sẽ là vùng văn bản có Chữ viết hoa<textarea></textarea>sẽ là vùng văn bản với Chữ viết hoa.<textarea autocapitalize="none"></textarea>sẽ là vùng văn bản Không viết hoa.
Đối với HTMLFormElement, chúng tôi quyết định không triển khai thuộc tính này vì chúng tôi nhận thấy rằng thuộc tính này hiếm khi được sử dụng trên các trang hiện nay và khi được dùng, thuộc tính này chủ yếu được dùng để tắt hoàn toàn tính năng tự động viết hoa trên biểu mẫu:
<form autocapitalize=off><input></form>
Giá trị trên là số lẻ, vì trạng thái mặc định của HTMLInputElement là Không viết hoa.
Tại sao bạn dùng nội dung này trên inputmode?
inputmode là giải quyết cùng một loại vấn đề, và những vấn đề khác.
Tuy nhiên, trình duyệt này vẫn thiếu các cách triển khai trình duyệt. Theo như chúng tôi hiểu, chỉ hệ điều hành Firefox mới có cách triển khai và có tiền tố (x-inputmode) – nhưng cũng rất ít khi được sử dụng trên web. Mặt khác, autocapitalize được sử dụng trên hàng triệu trang trên hàng trăm nghìn trang web đã có.
Khi nào nên sử dụng loại tài khoản này?
Đây không phải là danh sách đầy đủ về thời điểm bạn nên sử dụng autocapitalize; tuy nhiên, có một số khía cạnh mà việc giúp người dùng nhập văn bản mang lại giá trị lớn:
- Hãy sử dụng
autocapitalization=wordsnếu bạn là- Tên dự kiến của người nào đó (lưu ý: không phải tất cả các tên đều tuân theo quy tắc này, nhưng phần lớn tên phương Tây sẽ tự động viết hoa như dự kiến)
- Tên công ty
- Địa chỉ
- Hãy sử dụng
autocapitalization=charactersnếu bạn muốn:- Tiểu bang tại Hoa Kỳ
- Mã bưu chính của Vương quốc Anh
- Sử dụng
sentencescho các phần tử đầu vào nếu bạn muốn nội dung được nhập ở dạng đoạn văn thông thường, chẳng hạn như một bài đăng trên blog. - Sử dụng
nonetrên TextAreas nếu bạn muốn có nội dung không bị ảnh hưởng, chẳng hạn như nhập mã. - Nếu bạn không muốn tạo gợi ý, không nên thêm tự động viết hoa.