Το γεγονός onfocus

DOM Συνέδρα FocusEvent

Ορισμός και χρήση

Το γεγονός onfocus συμβαίνει όταν το στοιχείο λαμβάνει έμφαση.

Το γεγονός onfocus χρησιμοποιείται συχνά με <input>, <select> και <a>.

Σημείωση: Το γεγονός onfocus είναι παρόμοιο με onblur ΣυνέδραΑντίθετα.

Σημείωση: Το γεγονός onfocus είναι παρόμοιο με onfocusin ΣυνέδραΕπίσης, η διαφορά μεταξύ του onfocus γεγονότος είναι ότι το γεγονός 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

事件委托：将 addEventListener() 的 useCapture 参数设置为 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