งานออนโฟกัส
ตัวอย่าง
รัน JavaScript เมื่อฟิลด์อินพุตได้รับการโฟกัส:
<input type="text"
onfocus="myFunction()">
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
เหตุการณ์ onfocus เกิดขึ้นเมื่อองค์ประกอบได้รับการโฟกัส
เหตุการณ์ onfocus มักใช้กับ <input>, <select> และ <a>
เคล็ดลับ:เหตุการณ์ onfocus อยู่ตรงข้ามกับ เหตุการณ์onblur
เคล็ดลับ:เหตุการณ์ onfocus คล้ายกับ เหตุการณ์onfocusin ความแตกต่างที่สำคัญคือเหตุการณ์ onfocus จะไม่เกิดฟอง ดังนั้น หากคุณต้องการทราบว่าองค์ประกอบหรือรายการย่อยขององค์ประกอบนั้นได้รับการโฟกัสหรือไม่ คุณสามารถใช้เหตุการณ์ onfocusin ได้ อย่างไรก็ตาม คุณสามารถทำสิ่งนี้ได้โดยใช้พารามิเตอร์useCapture ทางเลือกของเมธอด addEventListener() สำหรับเหตุการณ์ onfocus
รองรับเบราว์เซอร์
Event | |||||
---|---|---|---|---|---|
onfocus | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
ใน HTML:
<element onfocus="myScript">
ในจาวาสคริปต์:
object.onfocus = function(){myScript};
ใน JavaScript โดยใช้เมธอด addEventListener() :
object.addEventListener("focus", myScript);
หมายเหตุ:วิธีการaddEventListener()ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
รายละเอียดทางเทคนิค
ฟองอากาศ: | ไม่ |
---|---|
ยกเลิกได้: | ไม่ |
ประเภทเหตุการณ์: | FocusEvent |
แท็ก HTML ที่รองรับ: | องค์ประกอบ HTML ทั้งหมด ยกเว้น: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> และ <title> |
รุ่น DOM: | กิจกรรมระดับ 2 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
การใช้ "onfocus" ร่วมกับเหตุการณ์ "onblur":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
ตัวอย่าง
ล้างช่องป้อนข้อมูลที่โฟกัส:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
ตัวอย่าง
การมอบหมายเหตุการณ์: การตั้งค่าพารามิเตอร์useCapture ของ addEventListener() เป็นจริง:
<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>
ตัวอย่าง
การมอบหมายกิจกรรม: การใช้เหตุการณ์ 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>