องค์ประกอบการออกแบบเว็บ Tabindex

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-05-06 10:00:04

TabIndex คือการเลือกองค์ประกอบ TabIndex ที่กำหนดไว้ในลำดับเพื่อตั้งค่าโฟกัสระหว่างแต่ละองค์ประกอบ

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

เมื่อกรอกแบบฟอร์ม (ลงทะเบียนเข้าสู่ระบบหรืออื่น ๆ ) ผู้ใช้จำนวนมากไม่ผ่านเมาส์ แต่กดปุ่มแท็บโดยตรงเพื่อข้ามไปยังกล่องข้อความถัดไปรอจนกว่าทุกสิ่งจะถูกกรอกข้อมูลแล้วส่ง นี่เป็นฟังก์ชั่นที่ดีและสะดวกมาก นิสัยส่วนตัวของฉันคือเมื่อเติมทุกอย่างการส่งมักจะคลิกที่ปุ่มส่งด้วยเมาส์และฉันไม่ต้องการให้แท็บโฟกัสกระโดดไปที่ปุ่ม แต่ฉันไม่ค่อยพบว่าแท็บนั้นจะไม่ข้ามไปที่ปุ่มโดยใช้แท็บ ฉันไม่รู้ว่าเป็นเพราะนิสัยส่วนตัวของฉันเป็น bt -_ เกินไป !!!!

หากคุณไม่ต้องการให้มีการโฟกัสบางอย่างคุณสามารถ tabindex = -x และสร้างค่าของ TabIndex เชิงลบดังนั้นแท็บนั้นจะข้ามไปโดยตรง

นี่คือรูปแบบง่าย ๆ เป็นตัวอย่าง:

<! doctype html public "-// w3c // dtd xhtml 1.0 เข้มงวด // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> สำหรับ </title> <style type = "text/css"> html, body {ตัวอักษร: 14px/200% Georgia, Verdana, Arial, "安中"; } </style> </head> <body> <form method = "post" action = "#"> <p> <label for = "t1"> แท็บกดครั้งแรกเพื่อตั้งค่าโฟกัสไปที่กล่องข้อความ </label> <อินพุต type = "text" id = "t1" tabindex = "1"/> </p> id = "t2" tabindex = "2"/> </p> <p> <label for = "t3"> แท็บกดที่สามเพื่อตั้งค่าโฟกัสไปที่กล่องข้อความ </label> <อินพุต type = "text" id = "t3" tabindex = "3"/> </p> <p> /> </p> </form> </body> </html>

คัดลอกรหัส