องค์ประกอบโฟกัส
องค์ประกอบใดที่จะได้รับโฟกัส? โดยค่าเริ่มต้นองค์ประกอบแบบฟอร์มเท่านั้นที่สามารถโฟกัสได้ เพราะองค์ประกอบแบบฟอร์มเท่านั้นสามารถโต้ตอบได้
<อินพุต type = "text" value = "223">
นอกจากนี้ยังมีวิธีที่จะได้รับโฟกัสขององค์ประกอบที่ไม่ใช่รูปแบบ ก่อนอื่นตั้งแอตทริบิวต์ tabIndex เป็น -1 จากนั้นเรียกใช้วิธี focus()
<div id = "test" style = "ความสูง: 30px; width: 100px; พื้นหลัง: LightGreen"> div </div> <ปุ่ม ID = "BTN"> องค์ประกอบ DIV ได้รับโฟกัส </button> <script> btn.onclick = function () {test.tabindex = -1; test.focus (); } test.onfocus = function () {this.style.background = 'Pink';} </script>activelement
document.activeElement Property ใช้เพื่อจัดการโฟกัส DOM และบันทึกองค์ประกอบที่ได้รับโฟกัสในปัจจุบัน
[หมายเหตุ] คุณสมบัตินี้ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์ IE
<div id = "test" style = "ความสูง: 30px; ความกว้าง: 100px; พื้นหลัง: LightGreen"> div </div> <ปุ่ม id = "btn"> องค์ประกอบ div ได้รับโฟกัส </button> <script> console.log (document.activelement); // <body> btn.onclick = ฟังก์ชั่น () test.focus (); console.log (document.activeelement); // <div>} </script>
รับโฟกัส
มี 4 วิธีสำหรับองค์ประกอบที่จะได้รับโฟกัสรวมถึงการโหลดหน้าเว็บอินพุตผู้ใช้ (กดปุ่มแท็บ), วิธี focus() และคุณสมบัติ autofocus
【 1 】การโหลดหน้าเว็บ
โดยค่าเริ่มต้นเมื่อเอกสารเพิ่งโหลดการอ้างอิงถึงองค์ประกอบของร่างกายจะถูกบันทึกไว้ใน document.activeElement ในระหว่างการโหลดเอกสารค่าของ document.activeElement คือ null
<script> console.log (document.activeelement); // null </script> <body> <pristr> console.log (document.active lement); // <body> </body> </script> </body>
【 2 】อินพุตผู้ใช้ (กดปุ่ม TAB)
โดยปกติผู้ใช้สามารถใช้คีย์แท็บเพื่อย้ายโฟกัสและใช้แถบอวกาศเพื่อเปิดใช้งานโฟกัส ตัวอย่างเช่นหากโฟกัสอยู่บนลิงค์ให้กด Space Bar ในเวลานี้และจะข้ามไปที่ลิงค์
เมื่อพูดถึงคีย์แท็บเราต้องไม่พูดถึงแอตทริบิวต์ tabindex แอตทริบิวต์ tabindex ใช้เพื่อระบุว่าโหนดองค์ประกอบ HTML ปัจจุบันถูกสำรวจโดยคีย์แท็บและลำดับความสำคัญของการสำรวจ
1. ถ้า tabindex=-1 คีย์แท็บข้ามองค์ประกอบปัจจุบัน
2. ถ้า tabindex=0 หมายความว่าปุ่มแท็บจะสำรวจองค์ประกอบปัจจุบัน หากองค์ประกอบไม่ได้ตั้ง tabindex ค่าเริ่มต้นคือ 0
3. ถ้า tabindex มากกว่า 0 นั่นหมายความว่าปุ่มแท็บจะถูกสำรวจก่อน ค่าที่ใหญ่ขึ้นก็ยิ่งมีลำดับความสำคัญน้อยลงเท่านั้น
ในรหัสต่อไปนี้เมื่อใช้คีย์แท็บลำดับที่ปุ่มได้รับโฟกัสคือ 2, 5, 1 และ 3
<div id = "box"> <button tabindex = "3"> 1 </button> <ปุ่ม tabindex = "1"> 2 </ปุ่ม> <ปุ่ม tabindex = "0"> 3 </button> <button tabindex = "-1"> 4 </button> <button tabindex = "2"> 5 </ 'Pink';} </script>
【 3 】โฟกัส ()
วิธี focus() ใช้เพื่อตั้งค่าโฟกัสของเบราว์เซอร์ไปยังฟิลด์ฟอร์มเช่นเปิดใช้งานฟิลด์ฟอร์มเพื่อให้สามารถตอบสนองต่อเหตุการณ์แป้นพิมพ์
[หมายเหตุ] ดังที่ได้กล่าวไว้ก่อนหน้านี้หากไม่ใช่องค์ประกอบของฟอร์มให้ตั้งค่าเป็น tabIndex เป็น -1 คุณยังสามารถโฟกัสได้
<span id = "test1" style = "ความสูง: 30px; ความกว้าง: 100px;"> span </span> <อินพุต id = "test2" value = "อินพุต"> <ปุ่ม id = "btn1"> องค์ประกอบ span ได้รับโฟกัส </button> <button id = "btn2"> function () {test1.tabindex = -1; test1.focus ();} btn2.onclick = function () {test2.focus ();} </script>【 4 】ออโต้โฟกัส
มีการเพิ่มคุณสมบัติ autofocus ลงในฟิลด์ฟอร์ม HTML5 ตราบใดที่ตั้งค่าคุณสมบัตินี้โฟกัสสามารถย้ายไปยังฟิลด์ที่สอดคล้องกันโดยอัตโนมัติโดยไม่ต้องใช้ JavaScript
[หมายเหตุ] แอตทริบิวต์นี้สามารถใช้สำหรับองค์ประกอบแบบฟอร์มเท่านั้น แม้ว่าองค์ประกอบปกติจะถูกตั้งค่าเป็น tabIndex=”-1″ มันจะไม่มีผล
<อินพุต autofocus value = "ABC">
hasfocus ()
document.hasFocus() เมธอดส่งคืนค่าบูลีนที่ระบุว่าองค์ประกอบใด ๆ ในเอกสารปัจจุบันถูกเปิดใช้งานหรือได้รับโฟกัส โดยการตรวจสอบว่าเอกสารได้รับโฟกัสหรือไม่คุณสามารถรู้ได้ว่ามีการโต้ตอบกับหน้าเว็บหรือไม่
console.log (document.hasfocus ()); // true // คลิกที่แท็บอื่น ๆ ภายในสองวินาทีเพื่อให้โฟกัสออกจากหน้าปัจจุบัน settimeout (ฟังก์ชัน () {console.log (document.hasfocus ()); // false}, 2000);การสูญเสียโฟกัส
หากคุณใช้ JavaScript เพื่อสูญเสียโฟกัสคุณจะต้องใช้วิธีการ blur()
ฟังก์ชั่นของวิธี blur() คือการลบโฟกัสออกจากองค์ประกอบ เมื่อเรียกวิธี blur() โฟกัสจะไม่ถูกถ่ายโอนไปยังองค์ประกอบเฉพาะ มันเป็นเพียงการลบโฟกัสออกจากองค์ประกอบที่เรียกวิธีการ
<อินพุต id = "ทดสอบ" type = "text" value = "123"> <ปุ่ม id = "btn1"> องค์ประกอบอินพุตได้รับโฟกัส </button> <ปุ่ม id = "btn2"> องค์ประกอบอินพุตสูญเสียโฟกัส </button> <script> btn1.onclick = function () {test.focus ();เหตุการณ์โฟกัส
เหตุการณ์โฟกัสจะถูกกระตุ้นเมื่อหน้าจะได้รับหรือสูญเสียโฟกัส การใช้กิจกรรมเหล่านี้และร่วมมือกับ document.hasFocus() วิธีการและเอกสารคุณสมบัติ document.activeElement คุณสามารถทราบที่อยู่ของผู้ใช้ในหน้า
เหตุการณ์โฟกัสรวมถึง 4 ต่อไปนี้
1. เบลอ
เหตุการณ์ blur จะถูกไล่ออกเมื่อองค์ประกอบสูญเสียโฟกัส เหตุการณ์นี้จะไม่เดือดปุด ๆ
2. โฟกัส
เหตุการณ์ focus จะถูกไล่ออกเมื่อองค์ประกอบได้รับการโฟกัส เหตุการณ์นี้จะไม่เดือดปุด ๆ
3. โฟกัส
เหตุการณ์ focusin จะถูกไล่ออกเมื่อองค์ประกอบได้รับการโฟกัส เหตุการณ์นี้เทียบเท่ากับเหตุการณ์ focus แต่มันเดือดปุด ๆ
4. โฟกัส
เหตุการณ์ focusour จะถูกไล่ออกเมื่อองค์ประกอบสูญเสียโฟกัส เหตุการณ์นี้เทียบเท่ากับเหตุการณ์เบลอ แต่เป็นฟอง
[หมายเหตุ] เกี่ยวกับเหตุการณ์โฟกัสและการโฟกัสยกเว้นสำหรับเบราว์เซอร์ IE ที่รองรับตัวจัดการเหตุการณ์ระดับ DOM0 เบราว์เซอร์อื่น ๆ รองรับ Handler ระดับ DOM2 เท่านั้น
<div id = "box" style = "จอแสดงผล: inline-block; padding: 25px; พื้นหลังสี: LightGreen;"> <div id = "Boxin" style = "ความสูง: 50px; ความกว้าง: 50px; พื้นหลัง-สี: สีชมพู;"> 123 123 สูญเสียโฟกัส </ปุ่ม> <ปุ่ม id = "รีเซ็ต"> คืนค่า </pution> <script> reset.onclick = function () {history.go ();} // focus () วิธี btn1.onclick = function () {boxin.tabindex = -1; boxin.focus ();} // blur () วิธี btn2.onclick = function () {boxin.blur ();} // เหตุการณ์โฟกัสถ้า (boxin.addeventListener) {boxin.addeventListener ('focus', handler) this.style.backgroundColor = 'LightBlue';} ถ้า (box.addeventListener) {box.addeventListener ('focusin', handler)} else {box.onfocusin = handler; fnblur; box.onblur = fnblur; </script> จากผลการดำเนินงานเราจะเห็นว่าเหตุการณ์ focusin สามารถฟองได้ ในขณะที่เหตุการณ์ blur ไม่สามารถฟอง
เหตุการณ์โฟกัสมักใช้สำหรับการแสดงผลแบบฟอร์มและการตรวจสอบ
ตัวอย่างเช่นเมื่อคุณได้รับโฟกัสให้ปรับเปลี่ยนสีพื้นหลัง เมื่อคุณสูญเสียโฟกัสให้คืนค่าสีพื้นหลังและตรวจสอบ
<div id = "box"> <input id = "input1" type = "text" placeholder = "เฉพาะป้อนตัวเลข"> <อินพุต id = "input2" type = "text" placeholder = "เฉพาะอักขระภาษาจีน"> <span id = "เคล็ดลับ"> </pan> </div> box.addeventListener ('focusOut', fnout);} else {box.onfocusin = fnin; box.onfocusout = fnout;} ฟังก์ชั่น fnin (e) {e = e || เหตุการณ์; var target = e.target || E.Srelement; target.style.backgroundColor = 'LightGreen';} ฟังก์ชั่น fnout (e) {e = e || เหตุการณ์; var target = e.target || E.Srelement; target.style.backgroundColor = 'เริ่มต้น'; // ถ้าเป็นกล่องข้อความที่ตรวจสอบหมายเลขถ้า (target === อินพุต 1) {ถ้า (!/^/d*$/. ทดสอบ (target.value.trim ())) {target.focus (); tips.innerhtml = 'เฉพาะป้อนหมายเลขโปรดป้อน' settimeout (function () {tips.innerhtml = ''}, 500); }} // ถ้าเป็นกล่องข้อความที่ตรวจสอบอักขระภาษาจีนถ้า (target === อินพุต 2) {ถ้า (!/^[/u4e00-/u9fa5]*$/. ทดสอบ (target.value.trim ())) {target.focus (); tips.innerhtml = 'เฉพาะเข้าสู่อักขระภาษาจีนโปรดกลับเข้าสู่' settimeout (function () {tips.innerhtml = ''}, 500) }}}} </script>สรุป
ข้างต้นคือการสรุปเนื้อหาทั้งหมดของการจัดการโฟกัสใน JavaScript สำหรับคุณ บทความนี้มีการแนะนำในรายละเอียดและมีค่าอ้างอิงบางอย่างสำหรับการศึกษาและการทำงานของคุณ หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร