อักษรตัวพิมพ์ใหญ่อัตโนมัติสำหรับมือถือ

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