onblur událost
Příklad
Spustit JavaScript, když uživatel opustí vstupní pole:
<input type="text" onblur="myFunction()">
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
K události onblur dochází, když objekt ztratí zaostření.
Událost onblur se nejčastěji používá s ověřovacím kódem formuláře (např. když uživatel opustí pole formuláře).
Tip: Událost onblur je opakem události onfocus .
Tip: Událost onblur je podobná události onfocusout . Hlavní rozdíl je v tom, že událost onblur nebublá. Pokud tedy chcete zjistit, zda prvek nebo jeho potomek ztratí fokus, můžete použít událost onfocusout. Můžete toho však dosáhnout pomocí volitelného parametru useCapture metody addEventListener() pro událost onblur.
Podpora prohlížeče
| Event | |||||
|---|---|---|---|---|---|
| onblur | Yes | Yes | Yes | Yes | Yes |
Syntax
V HTML:
<element onblur="myScript">
V JavaScriptu:
object.onblur = function(){myScript};
V JavaScriptu pomocí metody addEventListener():
object.addEventListener("blur", myScript);
Poznámka: Metoda addEventListener() není podporována v aplikaci Internet Explorer 8 a starších verzích.
Technické údaje
| bubliny: | Ne |
|---|---|
| Zrušitelné: | Ne |
| Typ události: | FocusEvent |
| Podporované HTML tagy: | VŠECHNY prvky HTML, KROMĚ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> a <title> |
| Verze DOM: | Události úrovně 2 |
Další příklady
Příklad
Použití „onblur“ společně s událostí „onfocus“:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Příklad
Delegování události: nastavení parametru useCapture funkce addEventListener() na hodnotu 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>
Příklad
Delegování události: pomocí události focusin (nepodporuje 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>