onblur-tapahtuma

DOM tapahtumat FocusEvent

Määrittely ja käyttö

onblur-tapahtuma tapahtuu, kun objekti menettää fokuksen.

onblur-tapahtuma käytetään yleensä yhdessä lomakkeen validointikoodin kanssa (esimerkiksi, kun käyttäjä poistuu lomakkeen kentästä).

Vinkki: onblur-tapahtuma on samanlainen kuin onfocus tapahtumapäinvastoin.

Vinkki: onblur-tapahtuma on samanlainen kuin onfocusout tapahtuma。Pääasiallinen ero on, että onblur-tapahtuma ei puhu. Siksi, jos haluat tarkistaa, onko elementti tai sen lapsielementti menettänyt fokuksen, voit käyttää onfocusout-tapahtumaa. Mutta voit käyttää onblur-tapahtuman addEventListener() -metodiuseCapture-parametrin (valinnainen) avulla.

Esimerkki

JavaScript suoritetaan, kun käyttäjä poistuu syöttökentästä:

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

Kokeile itse

Sivun alaosassa on lisää TIY-esimerkkejä.

syntaksi

HTML:ssä:

<element onblur="myScript">

Kokeile itse

JavaScriptissa:

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

Kokeile itse

JavaScriptissa käytä addEventListener() -metodia:

objekti.addEventListener("blur", myScript);

Kokeile itse

Huomautus:Internet Explorer 8 tai aikaisemmat versiot eivät tue addEventListener() -metodi.

Tekninen yksityiskohta

Puhkeava: Ei tuettu
Peruutettavissa: Ei tuettu
Tapahtumatyypit: FocusEvent
Tuetut HTML-elementit: Kaikki HTML-elementit, paitsi: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ja <title>
DOM-versio: Tason 2 tapahtumat

Selaimen tuki

Tapahtuma Chrome IE Firefox Safari Opera
onblur Tuki Tuki Tuki Tuki Tuki

Lisää esimerkkejä

Esimerkki

Käytä yhdessä "onblur" ja "onfocus" -tapahtumia:

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

Kokeile itse

Esimerkki

Syyt delegointi: Aseta addEventListener() -metodin useCapture-parametri arvoon 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>

Kokeile itse

Esimerkki

Syyt delegointi: Käytä focusin-tapahtumaa (Firefox ei tue):

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

Kokeile itse

DOM tapahtumat FocusEvent