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

พอล คินแลน

นี่อาจดูไม่ใช่ฟีเจอร์ที่น่าประทับใจที่สุดที่มีอยู่ แต่ฉันคิดว่าเรื่องนี้สำคัญเพราะใครๆ ก็ไม่ชอบการพิมพ์บนอุปกรณ์เคลื่อนที่ ไม่ชอบเลย ฉันไม่ชอบเลย ใน Chrome สำหรับ Android (ก่อน Chrome 43 โดยรุ่นเบต้า ณ เดือนเมษายน 2015) นักพัฒนาซอฟต์แวร์จะควบคุมวิธีที่เบราว์เซอร์ช่วยให้ผู้ใช้ป้อนข้อความได้เพียงเล็กน้อย หากคุณกำลังพิมพ์บนอุปกรณ์อยู่ อาจมีลักษณะดังนี้

โปรดสังเกตว่าทุกอย่างเป็นตัวพิมพ์เล็ก นอกเหนือจากค่าบางค่าที่ Android รู้จักเป็นชื่อ

Apple เปิดตัวแอตทริบิวต์ใน HTMLInputElement และ HTMLTextAreaElement ที่เรียกว่าตัวพิมพ์ใหญ่อัตโนมัติ ใน iOS 5 และช่วยให้ผู้เขียนหน้าบอกใบ้วิธีที่เบราว์เซอร์ควรแสดงแป้นพิมพ์เสมือนให้ผู้ใช้เพื่อเพิ่มประสิทธิภาพการป้อนข้อความสำหรับผู้ใช้ ด้วยรูปแบบที่ง่ายที่สุด คุณสามารถระบุว่ากล่องข้อความควรใช้อักษรตัวพิมพ์ใหญ่กับอักษรตัวแรกของทุกประโยคใหม่โดยอัตโนมัติ

ตั้งแต่วันที่ Chrome 43 เป็นต้นไป Chrome จะรองรับแอตทริบิวต์ตัวพิมพ์ใหญ่อัตโนมัติทั้งใน HTMLInputElement และ HTMLTextAreaElement ซึ่งจะทำให้คุณควบคุมลักษณะการใช้อักษรตัวพิมพ์ใหญ่อัตโนมัติของแป้นพิมพ์เสมือน และแทรกในบรรทัดด้วย Safari ใน iOS

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

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