ฟีเจอร์นี้อาจดูไม่น่าสนใจที่สุดเท่าที่เคยมีมา แต่เราคิดว่ามันสำคัญเพราะทุกคนไม่ชอบการพิมพ์บนอุปกรณ์เคลื่อนที่ คุณไม่ชอบ เราก็ไม่ชอบ ใน 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 หากคุณคาดหวังว่าเนื้อหาจะไม่ได้รับผลกระทบ เช่น การป้อนโค้ด - หากไม่ต้องการคำแนะนำ อย่าเพิ่มการขึ้นต้นด้วยอักษรตัวพิมพ์ใหญ่อัตโนมัติ