Tự động viết hoa cho thiết bị di động

Paul Kinlan

Đây có thể là tính năng không ấn tượng nhất hiện có, nhưng tôi nghĩ nó rất quan trọng vì mọi người đều không thích nhập liệu trên thiết bị di động: Bạn ghét, tôi cũng ghét. Trong Chrome cho Android (trước Chrome 43 – Bản thử nghiệm từ tháng 4 năm 2015), nhà phát triển có í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 bạn đang nhập trên một thiết bị ngày nay, thì nội dung nhập có thể có dạng như sau:

Lưu ý mọi thứ đều viết thường, ngoại trừ một số giá trị mà Android nhận dạng là 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 ý 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 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.

Kể từ Chrome 43, Chrome sẽ hỗ trợ thuộc tính autocapitalize (tự động viết hoa) trên cả HTMLInputElement và HTMLTextAreaElement. Điều này sẽ cho phép bạn kiểm soát hành vi tự động viết hoa của bàn phím ảo và đưa hành vi này vào cùng dòng với Safari trên iOS.

autocapitalize 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 tự động viết hoa.

Dưới đây là ví dụ đơn giản cho phép bạn tự động viết hoa các câu trong một vùng văn bản:

<textarea autocapitalize="sentences">

Phương thức tự động viết hoa có thể nhận giá trị nào?

Bảng sau đây cho thấy các trạng thái mà một phần tử đầu vào có thể ở:

Tiểu bang Từ khóa
<input>
<input autocapitalize=off> 		Không viết hoa không có [mặc định]
tắt
<input autocapitalize=characters> Cách viết hoa ký tự ký tự
<input autocapitalize=words> Viết hoa từ từ
<input autocapitalize=sentences> Viết hoa câu câu

Đối với HTMLInputElement, giá trị không hợp lệ mặc định là Sentences Capitalization (Viết hoa câu) nếu loại phần tử là type=text hoặc type=search. Nếu không, giá trị này sẽ là No Capitalization (Không viết hoa).

  • <input autocapitalize="simon"> sẽ là một trường văn bản có Viết hoa câu
  • <input type="email" autocapitalize="simon"> sẽ là một trường văn bản có chế độ Không viết hoa.
  • <input> sẽ là một trường văn bản có chế độ Không viết hoa.

Đối với HTMLTextAreaElement, giá trị không hợp lệ mặc định là Sentences Capitalization (In hoa câu). Đây là thay đổi so với hành vi mặc định.

  • <textarea autocapitalize="terry"></textarea> sẽ là một vùng văn bản có Viết hoa câu
  • <textarea></textarea> sẽ là một vùng văn bản có Viết hoa câu.
  • <textarea autocapitalize="none"></textarea> sẽ là một vùng văn bản có chế độ 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ì nhận thấy thuộc tính này hiếm khi được sử dụng trên các trang hiện nay và khi được sử 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>

Điều này khá lạ vì trạng thái mặc định của HTMLInputElement là Không viết hoa.

Tại sao bạn sử dụng phương thức này thay vì inputmode?

inputmode được dùng để giải quyết cùng một loại vấn đề, cùng với nhiều vấn đề khác. Tuy nhiên, nó thiếu các phương thức triển khai trình duyệt – theo như chúng tôi biết, chỉ Firefox OS có phương thức triển khai và có tiền tố (x-inputmode) – nhưng cũng có rất ít cách 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.

Khi nào tôi nên sử dụng tính năng 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ố nơi giúp người dùng nhập văn bản mang lại giá trị lớn:

  • Sử dụng autocapitalization=words nếu bạn đang
    • Tên người (lưu ý: không phải tên nào cũng tuân theo quy tắc này, nhưng phần lớn tên người phương Tây sẽ tự động viết hoa như mong đợi)
    • Tên công ty
    • Địa chỉ
  • Sử dụng autocapitalization=characters nếu bạn dự kiến:
    • Tiểu bang tại Hoa Kỳ
    • Mã bưu chính của Vương quốc Anh
  • Sử dụng sentences cho 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 bản thông thường – ví dụ: bài đăng trên blog.
  • Sử dụng none trên TextAreas nếu bạn muốn nội dung không bị ảnh hưởng – ví dụ: nhập mã.
  • Nếu bạn không muốn gợi ý, đừng thêm tính năng tự động viết hoa.