Το συμβάν onblur

Δημιουργία Ενεργειών DOM FocusEvent

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

Το συμβάν onblur συμβαίνει όταν το αντικείμενο χάνει το εστιασμό.

Το συμβάν onblur χρησιμοποιείται συχνά με κώδικα επαλήθευσης φόρμας (π.χ., όταν ο χρήστης αποχωρεί από το πεδίο της φόρμας).

Συμβουλή: Το συμβάν onblur είναι παρόμοιο με Σự Κάλεσμα Ενέργειας onfocusΑντίθετα.

Συμβουλή: Το συμβάν onblur είναι παρόμοιο με Σự Κάλεσμα Ενέργειας onfocusoutΠρωτεύον διαφορά είναι ότι το συμβάν onblur δεν βουχεί. Μέθοδος addEventListener()η παραμέτρος useCapture (προαιρετική) για να επιτευχθεί αυτό.

Παράδειγμα

Εκτελείται JavaScript όταν ο χρήστης αποχωρεί από το πεδίο εισαγωγής:

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

Δοκιμάστε το Εκπαιδευτικά

Περισσότερες TIY παραδείγματα στο κάτω μέρος της σελίδας.

Γλώσσα γραμματογραφίας

Στην HTML:

<element onblur="myScript">

Δοκιμάστε το Εκπαιδευτικά

Στην JavaScript:

objekt.onblur = function(){}myScript};

Δοκιμάστε το Εκπαιδευτικά

Στο JavaScript, χρησιμοποιώντας τη μέθοδο addEventListener():

objekt.addEventListener("blur", myScript);

Δοκιμάστε το Εκπαιδευτικά

Σημειώσεις:O 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
onblur Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

Περισσότερα παραδείγματα

Παράδειγμα

Χρήση των γεγονότων "onblur" και "onfocus" ταυτόχρονα:

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

Δοκιμάστε το Εκπαιδευτικά

Παράδειγμα

Αντιπροσωπεία γεγονότων: Βάζουμε το παράμετρο 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>

Δοκιμάστε το Εκπαιδευτικά

Παράδειγμα

Αντιπροσωπεία γεγονότων: Χρήση του γεγονότος 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