ฟีเจอร์นี้อาจดูไม่น่าสนใจที่สุดเท่าที่เคยมีมา แต่เราคิดว่ามันสำคัญเพราะทุกคนไม่ชอบการพิมพ์บนอุปกรณ์เคลื่อนที่ คุณไม่ชอบ เราก็ไม่ชอบ ใน Chrome สำหรับ Android (ก่อน Chrome 43 - เบต้า ณ เดือนเมษายน 2015) นักพัฒนาแอปมีการควบคุมเพียงเล็กน้อยเกี่ยวกับวิธีที่เบราว์เซอร์จะช่วยผู้ใช้ป้อนข้อความ หากพิมพ์บนอุปกรณ์ในปัจจุบัน แป้นพิมพ์อาจมีลักษณะดังนี้
โปรดสังเกตว่าทุกอย่างเป็นตัวพิมพ์เล็ก ยกเว้นค่าบางค่าที่ Android จดจำว่าเป็นชื่อ
Apple ได้เปิดตัวแอตทริบิวต์ใน HTMLInputElement และ
HTMLTextAreaElement ที่เรียกว่า autocapitalize ใน iOS 5 ซึ่งช่วยให้ผู้เขียนหน้าเว็บบอกใบ้ได้ว่าเบราว์เซอร์ควรแสดงแป้นพิมพ์เสมือนอย่างไรให้แก่ผู้ใช้เพื่อเพิ่มประสิทธิภาพการป้อนข้อความ ในรูปแบบที่ง่ายที่สุด คุณสามารถระบุว่ากล่องข้อความควรทำให้ตัวอักษรแรกของประโยคใหม่แต่ละประโยคเป็นตัวพิมพ์ใหญ่โดยอัตโนมัติ
ตั้งแต่ Chrome 43 เป็นต้นไป Chrome จะรองรับแอตทริบิวต์ autocapitalize ในทั้ง HTMLInputElement และ HTMLTextAreaElement ซึ่งจะช่วยให้คุณควบคุมลักษณะการทำงานของแป้นพิมพ์เสมือนในการขึ้นต้นด้วยอักษรตัวพิมพ์ใหญ่โดยอัตโนมัติและทำให้การทำงานสอดคล้องกับ Safari ใน iOS
autocapitalize จะมีผลกับ HTMLInputElement ที่มีการตั้งค่าแอตทริบิวต์ type เป็น type="text", type="search", type="url", type="tel", type="email" หรือ type="password" เท่านั้น ค่าเริ่มต้นคือไม่ใช้อักษรตัวพิมพ์ใหญ่โดยอัตโนมัติ
ต่อไปนี้เป็นตัวอย่างง่ายๆ ที่ช่วยให้คุณเปลี่ยนประโยคในพื้นที่ข้อความเป็นตัวพิมพ์ใหญ่โดยอัตโนมัติ
<textarea autocapitalize="sentences">
ค่าใดบ้างที่ระบบจะเปลี่ยนเป็นอักษรตัวพิมพ์ใหญ่โดยอัตโนมัติได้
ตารางต่อไปนี้แสดงสถานะต่างๆ ที่องค์ประกอบอินพุตอยู่ได้
| รัฐ | คีย์เวิร์ด | |
|---|---|---|
<input><input autocapitalize=off>
|
ไม่ใช้อักษรตัวพิมพ์ใหญ่ | ไม่มี [ค่าเริ่มต้น] |
| ปิด | ||
<input autocapitalize=characters> |
การใช้อักษรตัวพิมพ์ใหญ่ของตัวละคร | อักขระ |
<input autocapitalize=words> |
การใช้อักษรตัวพิมพ์ใหญ่ของคำ | คำ |
<input autocapitalize=sentences> |
การใช้อักษรตัวพิมพ์ใหญ่ในประโยค | ประโยค |
สำหรับ HTMLInputElement ค่าเริ่มต้นที่ไม่ถูกต้องคือการใช้ตัวพิมพ์ใหญ่ขึ้นต้นประโยค หากประเภทขององค์ประกอบคือ type=text หรือ type=search มิเช่นนั้นจะเป็นไม่ใช้ตัวพิมพ์ใหญ่
<input autocapitalize="simon">จะเป็นช่องข้อความที่มีการใช้อักษรตัวพิมพ์ใหญ่ในประโยค<input type="email" autocapitalize="simon">จะเป็นช่องข้อความที่มีไม่ใช้อักษรตัวพิมพ์ใหญ่<input>จะเป็นช่องข้อความที่มีไม่ใช้อักษรตัวพิมพ์ใหญ่
สําหรับ HTMLTextAreaElement ค่าเริ่มต้นที่ไม่ถูกต้องคือ Sentences
Capitalization การเปลี่ยนแปลงนี้แตกต่างจากลักษณะการทำงานเริ่มต้น
<textarea autocapitalize="terry"></textarea>จะเป็นพื้นที่ข้อความที่มีการใช้อักษรตัวพิมพ์ใหญ่ในประโยค<textarea></textarea>จะเป็นพื้นที่ข้อความที่มีการใช้ตัวพิมพ์ใหญ่ขึ้นต้นประโยค<textarea autocapitalize="none"></textarea>จะเป็นพื้นที่ข้อความที่มีไม่มีการใช้อักษรตัวพิมพ์ใหญ่
สำหรับ HTMLFormElement เราตัดสินใจที่จะไม่ใช้แอตทริบิวต์นี้ เนื่องจากพบว่ามีการใช้งานแอตทริบิวต์นี้ในหน้าเว็บน้อยมากในปัจจุบัน และเมื่อใช้งาน ส่วนใหญ่จะใช้เพื่อปิดใช้ตัวพิมพ์ใหญ่อัตโนมัติในแบบฟอร์มโดยสมบูรณ์
<form autocapitalize=off><input></form>
ข้อความข้างต้นผิดปกติเนื่องจากสถานะเริ่มต้นของ HTMLInputElement คือไม่ใช้อักษรตัวพิมพ์ใหญ่
เหตุใดคุณจึงใช้ inputmode แทน
inputmode มีไว้เพื่อแก้ปัญหาประเภทเดียวกันและอื่นๆ
อย่างไรก็ตาม ยังไม่มีการใช้งานในเบราว์เซอร์เท่าที่ทราบ มีเพียง Firefox OS เท่านั้นที่ใช้และมีคำนำหน้า (x-inputmode) แต่การใช้งานบนเว็บก็น้อยมากเช่นกัน ในทางกลับกัน autocapitalize มีการใช้อยู่ในหน้าเว็บหลายล้านหน้าในเว็บไซต์หลายแสนเว็บไซต์แล้ว
ฉันควรใช้ฟีเจอร์นี้เมื่อใด
รายการนี้ไม่ใช่รายการที่ครอบคลุมกรณีที่ควรใช้ autocapitalize แต่มีบางตำแหน่งที่การช่วยให้ผู้ใช้ป้อนข้อความมีประโยชน์อย่างมาก ดังนี้
- ใช้
autocapitalization=wordsหากคุณเป็นบุคคลต่อไปนี้- ชื่อบุคคล (หมายเหตุ: ชื่อบางชื่ออาจไม่เป็นไปตามกฎนี้ แต่ชื่อส่วนใหญ่ของชาวตะวันตกจะเป็นตัวพิมพ์ใหญ่โดยอัตโนมัติตามที่คาดไว้)
- ชื่อบริษัท
- ที่อยู่
- ใช้
autocapitalization=charactersหากคาดว่าจะได้รับสิ่งต่อไปนี้- รัฐในสหรัฐอเมริกา
- รหัสไปรษณีย์ของสหราชอาณาจักร
- ใช้
sentencesสำหรับองค์ประกอบอินพุตหากคุณต้องการเนื้อหาที่ป้อนในรูปแบบย่อหน้าปกติ เช่น บล็อกโพสต์ - ใช้
noneใน TextArea หากคุณคาดหวังว่าเนื้อหาจะไม่ได้รับผลกระทบ เช่น การป้อนโค้ด - หากไม่ต้องการคำแนะนำ อย่าเพิ่มการขึ้นต้นด้วยอักษรตัวพิมพ์ใหญ่อัตโนมัติ