ดูที่แอตทริบิวต์ตัวยึด HTML5

หนึ่งในชิ้นงานใหม่ที่ฉันโปรดปรานใน HTML5 คือความสามารถในการเพิ่ม ข้อความตัวยึด อย่างง่ายดาย ข้อความตัวยึดตำแหน่งเป็นข้อความสีเทาที่คุณพบในฟิลด์อินพุตที่ใช้เพื่อบอกใบ้ให้กับผู้ใช้เกี่ยวกับสิ่งที่คาดว่าจะป้อนในฟิลด์นั้น เมื่อผู้ใช้เริ่มพิมพ์ใน อินพุต ฟิลด์ข้อความนี้จะหายไป.

ในสมัยก่อนเรามักจะทำเช่นนี้ ด้วยจาวาสคริปต์, ดังนี้

ไม่มีอะไรผิดปกติกับการปฏิบัตินี้ แต่จะง่ายกว่าใน HTML5.

HTML5 แนะนำแอตทริบิวต์ใหม่พร้อมชื่อแบบลอจิคัล ตัวยึด. นี่คือตัวอย่าง:

หากเราดูในเบราว์เซอร์ตอนนี้อินพุตควรมีข้อความสีเทาดังที่แสดงด้านล่าง

บางสิ่งที่ควรสังเกต: ตามข้อกำหนด, the ตัวยึด ไม่ควรใช้แอตทริบิวต์เป็นทางเลือกแทน ฉลาก และแนะนำว่าควรใช้กับคุณลักษณะนี้เท่านั้น อินพุต ประเภทที่ต้องใช้ข้อความเช่น. ข้อความ, รหัสผ่าน, ค้นหา, อีเมล, textarea และ โทร.

เพิ่ม ตัวยึด ไปที่ อินพุต ประเภท: วิทยุ และ ช่องทำเครื่องหมาย จะไม่สร้างความแตกต่างใด ๆ.

ตัวยึด & CSS

นอกจากนี้การใส่สไตล์ตัวยึดข้อความผ่าน CSS ก็เป็นไปได้เช่นกัน แต่ในขณะที่เขียนนี้ยัง จำกัด เฉพาะเบราว์เซอร์ Firefox และ Webkit เท่านั้น.

ตัวอย่างต่อไปนี้แสดงวิธีที่เราเปลี่ยนข้อความตัวยึดเป็นสีเขียวทั้งใน Webkit และ Firefox

 อินพุต :: - webkit-input-placeholder color: green;  อินพุต: -moz-placeholder color: green;  

เพียงจำไว้ว่า :: - WebKit อินพุต-ตัวยึด และ : -moz-ตัวยึด จะมีผลกับข้อความเท่านั้นและไม่สามารถเขียนแบบขนานได้.

 อินพุต :: - webkit-input-placeholder, อินพุต: -moz-placeholder color: green;  

โค้ดนี้ไม่สามารถใช้งานได้.

เลือกคุณสมบัติ

CSS3 ยังมาเพื่อสนับสนุนคุณสมบัตินี้โดยการแนะนำ [placeholder] ตัวเลือกคุณสมบัติ;

 อินพุต [ตัวยึดตำแหน่ง] เส้นขอบ: 1px สีเขียวทึบ  

ในตัวอย่างด้านบนเราเลือกทุกข้อ อินพุต ที่มี ตัวยึด คุณลักษณะและเปลี่ยนเส้นขอบเป็นสีเขียว.

ความเข้ากันได้ของเบราว์เซอร์

คุณลักษณะ HTML5 ใหม่นี้ไม่น่าแปลกใจไม่ได้รับการสนับสนุนในเบราว์เซอร์เก่าและปัจจุบันรองรับเฉพาะใน: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 และ Internet Explorer 10 (ซึ่งยังไม่เปิดตัวอย่างเป็นทางการ).

ตัวยึด Polyfills

อย่างไรก็ตามหากเราต้องการแสดงตัวยึดตำแหน่งในเบราว์เซอร์รุ่นเก่า แต่ก็ยังสามารถใช้งานได้ ตัวยึด คุณลักษณะเราสามารถใช้ Polyfills มีจำนวนมาก ตัวยึด Polyfills นอกนั้น แต่ในตัวอย่างนี้เราจะใช้ PlaceMe.js;

The PlaceMe.js, ตามที่คุณเห็นจากโค้ดขนาดใหญ่ข้างต้นขึ้นอยู่กับ jQuery ตอนนี้ถ้าเราดูในตัวอย่างเช่น Internet Explorer 9 อินพุตทั้งหมดควรแสดงข้อความตัวยึดตำแหน่ง.

• ดูการสาธิต
• แหล่งดาวน์โหลด

ความคิดสุดท้าย

HTML5 Placeholder คุณลักษณะแน่นอนทำให้การเพิ่มข้อความตัวยึดได้ง่ายขึ้น ตอนนี้มันขึ้นอยู่กับเรานักพัฒนาเว็บและนักออกแบบเพื่อเลือกวิธีการใช้งาน: JavaScript หรือ HTML5.

หากคุณพิจารณาว่าการใช้ Polyfills และ jQuery เพื่อสนับสนุนเบราว์เซอร์รุ่นเก่านั้นมีความซ้ำซ้อนดังนั้น JavaScript จึงเหมาะสำหรับงานมากกว่า แต่หากคุณสามารถเพิกเฉยต่อเบราว์เซอร์เก่าได้อย่างสงบการใช้ HTML5 Placeholder อาจเป็นวิธีที่ดีกว่า.