onblur-ventetiden

DOM begivenheder FocusEvent

Definition og brug

onblur-ventetiden opstår, når et objekt mister fokus.

onblur-ventetiden bruges ofte sammen med formulærvalideringskoder (f.eks. når brugeren forlader et formulærfelt).

Tip: onblur-ventetiden ligner onfocus begivenhedmodsat.

Tip: onblur-ventetiden ligner onfocusout begivenhed。Den største forskel er, at onblur-ventetiden ikke bobler. Derfor kan du bruge onfocusout-ventetiden for at finde ud af, om et element eller dens underelementer har mistet fokus. Men du kan bruge onblur-ventetidens addEventListener() metodenbrug af useCapture parameter (valgfri) for at opnå dette.

Eksempel

Kør JavaScript, når brugeren forlader et tekstfelt:

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

Prøv det selv

Der er flere TIY-eksempler nedenfor.

syntaks

I HTML:

<element onblur="myScript">

Prøv det selv

I JavaScript:

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

Prøv det selv

I JavaScript, brug af addEventListener() metoden:

object.addEventListener("blur", myScript);

Prøv det selv

Kommentar:Internet Explorer 8 eller tidigare versioner understøtter inte addEventListener() metoden.

Teknisk detalje

Bobbel: Ikke understøttet
Kan annulleras: Ikke understøttet
Event type: FocusEvent
Understøttede HTML-märken: Alla HTML-element, utom: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> och <title>
DOM version: Level 2 Events

Browser understøttelse

Event Chrome IE Firefox Safari Opera
onblur Understøtter Understøtter Understøtter Understøtter Understøtter

Flere eksempler

Eksempel

Brug af "onblur" og "onfocus"-tilsagn sammen:

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

Prøv det selv

Eksempel

Event delegation: sæt addEventListener()'s useCapture parameter til 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>

Prøv det selv

Eksempel

Event delegation: brug af focusin-tilsagn (Firefox understøtter ikke):

<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>

Prøv det selv

DOM begivenheder FocusEvent