onfocus událost
Příklad
Spusťte JavaScript, když se zaměří vstupní pole:
<input type="text"
onfocus="myFunction()">
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Událost onfocus nastane, když se prvek zaměří.
Událost onfocus se nejčastěji používá s <input>, <select> a <a>.
Tip: Událost onfocus je opakem události onblur .
Tip: Událost onfocus je podobná události onfocusin . Hlavní rozdíl je v tom, že onfocus událost neprobublává. Pokud tedy chcete zjistit, zda se fokus dostane na prvek nebo jeho potomek, můžete použít událost onfocusin. Můžete toho však dosáhnout pomocí volitelného parametru useCapture metody addEventListener() pro událost onfocus.
Podpora prohlížeče
| Event | |||||
|---|---|---|---|---|---|
| onfocus | Yes | Yes | Yes | Yes | Yes |
Syntax
V HTML:
<element onfocus="myScript">
V JavaScriptu:
object.onfocus = function(){myScript};
V JavaScriptu pomocí metody addEventListener():
object.addEventListener("focus", 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í „onfocus“ společně s událostí „onblur“:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Příklad
Vymazat vstupní pole při fokusu:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
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>