เหตุการณ์ onfocus

เหตุการณ์ DOM FocusEvent

คำอธิบายและวิธีใช้

เหตุการณ์ onfocus ที่เกิดขึ้นเมื่อ element ได้รับความสำคัญ

เหตุการณ์ onfocus ที่ใช้บ่อยที่สุดคือ <input>、<select> และ <a>

คำเตือน： เหตุการณ์ onfocus คล้าย เหตุการณ์ onblurตรงกันข้าม

คำเตือน： เหตุการณ์ onfocus คล้าย เหตุการณ์ onfocusinความแตกต่างหลักคือเหตุการณ์ onfocus จะไม่มีการแบ่งชิง (bubble) ดังนั้นถ้าคุณต้องการตรวจสอบว่าวิธีประกาศ element หรือ child element ได้รับความสำคัญหรือไม่ คุณสามารถใช้เหตุการณ์ onfocusin แทน แต่คุณสามารถใช้เหตุการณ์ onfocus ด้วย addEventListener() วิธีของ useCapture สามารถทำได้ด้วยประกาศตัวแปร

ตัวอย่าง

ตัวอย่าง 1

ปฏิบัติ JavaScript ตอนโดยสารได้ความสำคัญ

<input type="text" onfocus="myFunction()">

ทดลองด้วยตัวเอง

มีตัวอย่าง TIY มากมายที่ด้านล่างของหน้า

ศัพท์

ใน HTML ดังนี้:

<element onfocus="myScript">

ทดลองด้วยตัวเอง

ใน JavaScript ดังนี้:

object.onfocus = function(){myScript};

ทดลองด้วยตัวเอง

ใน JavaScript ใช้วิธี addEventListener() ดังนี้:

object.addEventListener("focus", myScript);

ทดลองด้วยตัวเอง

หมายเหตุ：Internet Explorer 8 หรือตัวรุ่นเก่ากว่าไม่สนับสนุน addEventListener() วิธี。

รายละเอียดเทคนิค

บูมเปิด ไม่สนับสนุน
ยกเลิกได้ ไม่สนับสนุน
ชนิดเหตุการณ์： FocusEvent
ตามองแบบ HTML ที่สนับสนุน： ทุกองค์ประกอบ HTML นอกจาก：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> และ <title>
เวอร์ชัน DOM： Level 2 Events

การสนับสนุนเบราเซอร์

เหตุการณ์ Chrome IE Firefox Safari Opera
onfocus สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

ตัวอย่างเพิ่มเติม

ตัวอย่าง 2

ใช้งานอุปกรณ์สัญญาณ onfocus และ onblur พร้อมกัน：

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

ทดลองด้วยตัวเอง

ตัวอย่าง 3

เคลี่ยนค่าช่องบอกที่ได้รับความสนใจมา

<!-- แต่งค่าค่าที่มีความหมายเดิมของช่องบอกเข้ามาเป็นข้อความว่าง -->
<input type="text" onfocus="this.value=''" value="Blabla">

ทดลองด้วยตัวเอง

ตัวอย่าง 4

事件委派：ตั้งค่าตัวแปร useCapture ของ addEventListener() ให้เป็น true：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

ทดลองด้วยตัวเอง

ตัวอย่าง 5

事件委派：ใช้งานอุปกรณ์สัญญาณ focusin (Firefox ไม่สนับสนุน)：

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

ทดลองด้วยตัวเอง

เหตุการณ์ DOM FocusEvent