Exemplu
Executați un JavaScript atunci când un câmp de intrare este pe cale să-și piardă concentrarea:
<input type="text"
onfocusout="myFunction()"> Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Evenimentul onfocusout are loc atunci când un element este pe cale să-și piardă concentrarea.
Sfat: Evenimentul onfocusout este similar cu onblur eveniment. Principala diferență este că evenimentul onblur nu cu bule. Prin urmare, dacă doriți să aflați dacă un element sau copilul său își pierde concentrarea, ar trebui să utilizați evenimentul onfocusout.
Sfat: Deși Firefox nu acceptă evenimentul onfocusout, puteți afla dacă un copil al unui element pierde se concentreze sau nu, prin utilizarea unui ascultător de capturare pentru onblur eveniment (folosind parametrul useCapture opțional al addEventListener() metoda).
Tip: Evenimentul onfocusout este opusul onfocusin evenimentului.
Suport pentru browser-
| Eveniment | |||||
|---|---|---|---|---|---|
| onfocusout | da | da | Nu sunt acceptate | da | da |
Notă: Evenimentul onfocusout poate să nu funcționeze conform așteptărilor în Chrome, Safari și Opera 15+ , folosind sintaxa HTML JavaScript DOM. Cu toate acestea, ar trebui să funcționeze ca un atribut HTML și folosind addEventListener() metoda.
Sintaxă
In HTML:
< Încearcă - l singur » În JavaScript (may not work as expected in Chrome, Safari and Opera 15+) să (may not work as expected in Chrome, Safari and Opera 15+) :
object .onfocusout=function(){ Încearcă - l singur » În JavaScript, folosind addEventListener() metoda:
object .addEventListener("focusout", myScript );
Încearcă - l singur » Notă: addEventListener() , metoda nu este acceptată în Internet Explorer 8 și versiunile anterioare.
Detalii tehnice
| Bule: | da |
|---|---|
| anulabil: | Nu |
| Tip de eveniment: | FocusEvent |
| Tag-uri HTML acceptate: | Toate elementele HTML, cu excepția: <bază>, <BDO>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> și <title> |
| DOM Versiune: | Nivelul 2 Evenimente |
Mai multe exemple
Exemplu
Folosind "onfocusin" împreună cu "onfocusout" eveniment:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Încearcă - l singur » Exemplu
Eveniment delegare: setarea parametrului useCapture de addEventListener() la true (for focus and 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>
Încearcă - l singur » Exemplu
Eveniment delegare: folosind evenimentul focusin (nu este acceptat de 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>
Încearcă - l singur » <Eveniment obiect