onfocus 事件

ບັນດາເຫດ DOM FocusEvent

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

onfocus 事件ຈະເກີດຂຶ້ນເມື່ອປະກອບຂອງຫຼິ້ນຮັບບູຮູບຄວາມສົນໃຈ.

onfocus 事件ຈະນຳໃຊ້ກັບ <input>, <select> ແລະ <a> ຫຼາຍທີ່ສຸດ.

ຄຳເຫັນ: onfocus 事件ທີ່ມັກກັບ ການເກີດຂອງບັນດາເຫດ onblurກົງກັນຂ້າມ.

ຄຳເຫັນ: onfocus 事件ຄ້າຍຄືກັນກັບ ການເກີດຂອງບັນດາເຫດ onfocusin。ຄວາມແຕກຕ່າງຫຼັກແມ່ນ onfocus 事件ບໍ່ຈະຫຼຸບລົງກັບ. ຖ້າທ່ານຕ້ອງການກວດສອບວ່າປະກອບຂອງຫຼິ້ນຫຼືຫຼິ້ນທີ່ຢູ່ໃນປະກອບຂອງຫຼິ້ນມັນຢູ່ໃນບູຮູບຄວາມສົນໃຈ, ທ່ານສາມາດໃຊ້ 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