Προτεινόμενα μαθήματα:
Το συμβάν onfocusin
Ορισμός και χρήση
Αν και το Firefox δεν υποστηρίζει το συμβάν onfocusin, μπορείτε να χρησιμοποιήσετε το συμβάν onfocus με ακροατήρα κατακερματισμού (χρησιμοποιώντας τον επιλογικό παραμέτρο useCapture της μεθόδου addEventListener()) για να καθορίσετε αν το υποκείμενο στοιχείο του στοιχείου αποκτά έμφαση.Το συμβάν onfocusin συμβαίνει όταν το στοιχείο θα αποκτήσει έμφαση. Συμβάν onfocusΗ κύρια διαφορά είναι ότι το συμβάν onfocus δεν παραπλανεί.
Αν και το Firefox δεν υποστηρίζει το συμβάν onfocusin, μπορείτε να χρησιμοποιήσετε το συμβάν onfocus με ακροατήρα κατακερματισμού (χρησιμοποιώντας τον επιλογικό παραμέτρο useCapture της μεθόδου addEventListener()) για να καθορίσετε αν το υποκείμενο στοιχείο του στοιχείου αποκτά έμφαση.。
Αν και το Firefox δεν υποστηρίζει το συμβάν onfocusin, μπορείτε να χρησιμοποιήσετε το συμβάν onfocus με ακροατήρα κατακερματισμού (χρησιμοποιώντας τον επιλογικό παραμέτρο useCapture της μεθόδου addEventListener()) για να καθορίσετε αν το υποκείμενο στοιχείο του στοιχείου αποκτά έμφαση.Συμβουλή: Συμβάν onfocusoutΤο συμβάν onfocusin είναι παρόμοιο με
Αντίθετα.
Ενότητα
Παράδειγμα 1
Εκτέλεση JavaScript όταν το πεδίο εισαγωγής θα αποκτήσει έμφαση:
Προσπαθήστε να το κάνετε μόνοι σας
<input type="text" onfocusin="myFunction()">
Παρακάτω στην ιστοσελίδα υπάρχουν περισσότερες παραδείγματα TIY.
Γραμματική
Στο HTML:< element.addEventListener("focusin",onfocusin="
Προσπαθήστε να το κάνετε μόνοι σας
">
Στο JavaScript, χρησιμοποιώντας τη μέθοδο addEventListener():Στο JavaScript (μπορεί να μην λειτουργεί σωστά στο Chrome, Safari και Opera 15+):.addEventListener("focusin",.onfocusin = function(){
Προσπαθήστε να το κάνετε μόνοι σας
};
Στο JavaScript, χρησιμοποιώντας τη μέθοδο addEventListener():object .addEventListener("focusin",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 |
|---|---|---|---|---|---|
| onfocusin | Υποστήριξη | Υποστήριξη | 52.0 | Υποστήριξη | Υποστήριξη |
Σημείωση:Το γεγονός onfocusin μπορεί να μην λειτουργεί όπως αναμένεται στο Chrome, Safari και Opera 15+ με τη χρήση της γραμματοσειράς JavaScript HTML DOM. Ωστόσο, θα πρέπει να χρησιμοποιείται ως ιδιότητα HTML και με τη μέθοδο addEventListener() (βλέπε παρακάτω παράδειγμα γραμματοσειράς).
Περισσότερα παραδείγματα
Παράδειγμα 2
Χρήση των γεγονότων "onfocusin" και "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Προσπαθήστε να το κάνετε μόνοι σας
Παράδειγμα 3
Αντιπροσωπεία γεγονότων: Ορισμός του παραμέτρου useCapture της addEventListener() σε true (για focus και blur):
<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>
Προσπαθήστε να το κάνετε μόνοι σας
Παράδειγμα 4
Αντιπροσωπεία γεγονότων: Χρήση γεγονότων focusin:
<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>
