ความคิดเห็น: ตอนนี้ฟังก์ชั่น HTML อย่างง่ายช่วยให้เราสามารถค้นหาโฟกัสอินพุตกับองค์ประกอบที่ต้องการได้โดยอัตโนมัติหลังจากโหลดหน้าเว็บ มันเสร็จสิ้นผ่านแอตทริบิวต์ที่เรียกว่า AutoFocus เพื่อนที่สนใจสามารถเรียนรู้ได้
ข้อความต้นฉบับ: HTML5 Autofocus Intribut
วันที่วางจำหน่ายต้นฉบับ: 27 สิงหาคม 2555
เวลาแปล: 6 สิงหาคม 2556
HTML5 ได้เปิดตัวสิ่งที่ยอดเยี่ยมมากมายสำหรับเรา
ในอดีตงานที่เราต้องการให้เสร็จสมบูรณ์ด้วย JavaScript และ Flash เช่นการตรวจสอบแบบฟอร์มการแจ้งเตือนช่องว่าง (อินพุตตัวยึด) การอัปโหลดและดาวน์โหลดไฟล์ไคลเอนต์ (การตั้งชื่อไฟล์ด้านไคลเอ็นต์) และการเล่นเสียง/วิดีโอสามารถเสร็จสิ้นด้วย HTML พื้นฐาน คุณสมบัติ HTML ที่เรียบง่ายอีกอย่างหนึ่งคือตอนนี้ช่วยให้เราสามารถค้นหาโฟกัสอินพุตไปยังองค์ประกอบที่ต้องการได้โดยอัตโนมัติหลังจากโหลดหน้าเว็บและเสร็จสมบูรณ์ผ่านคุณสมบัติที่เรียกว่า AutoFocus
รหัสนั้นง่ายเหมือนดังต่อไปนี้:
<!- ทั้งหมดนี้ทำงานได้! -
<อินพุต autofocus = "autofocus" />>
<ปุ่ม autofocus = "autofocus"> สวัสดี! </ button>
<textarea autofocus = "autofocus"> </ceplarea>
หลังจากตั้งค่าคุณสมบัติ AutoFocus แล้วองค์ประกอบอินพุต textarea และปุ่มจะถูกเลือกโดยอัตโนมัติหลังจากโหลดหน้าเว็บ (นั่นคือการได้รับโฟกัส) ฉันลององค์ประกอบอื่น ๆ (เช่นแท็ก H1), tabindex = 0 แต่คุณสมบัติ AutoFocus ไม่มีผลต่อองค์ประกอบเหล่านี้เลย
แอตทริบิวต์นี้มีประโยชน์ในวัตถุประสงค์หลักของการรับหน้าเว็บที่มีจุดประสงค์หลักคือการรวบรวมข้อมูลเช่นหน้าแรกของ Google (99% ของกรณีที่ใช้สำหรับการค้นหา) หรือตัวช่วยสร้างการติดตั้งออนไลน์ (เช่นติดตั้ง WordPress) และสิ่งที่สำคัญที่สุดคือ JavaScript ไม่จำเป็นต้องมีส่วนร่วม
รหัสหน้าสมบูรณ์มีดังนี้:
<! doctype html>
<html>
<head>
<title> การทดสอบแอตทริบิวต์ AutoFocus HTML5 </title>
<meta content = "editPlus">
<meta content = "[email protected]">
<meta content = "Original = http: //davidwalsh.name/autofocus">
</head>
<body>
<!- โดยหลักการแล้วสามารถตั้งค่าองค์ประกอบสามอย่างต่อไปนี้ได้ หากมีการตั้งค่าหลายองค์ประกอบองค์ประกอบสุดท้ายควรได้รับโฟกัส->
-
-
<div>
<อินพุต autofocus = "autofocus" />>
<ปุ่ม autofocus = "autofocus"> สวัสดี! </ button>
<textarea autofocus = "autofocus"> </ceplarea>
</div>
</body>
</html>