onfocusin událost
Příklad
Spusťte JavaScript, když se má vstupní pole zaměřit:
<input type="text"
onfocusin="myFunction()">
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
K události onfocusin dochází, když se prvek chystá zaostřit.
Tip: Událost onfocusin je podobná události onfocus . 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ěli byste použít událost onfocusin.
Tip: Událost onfocusin je opakem události onfocusout .
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která událost plně podporuje.
Event | |||||
---|---|---|---|---|---|
onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Poznámka: Událost onfocusin nemusí fungovat podle očekávání v prohlížečích Chrome, Safari a Opera 15+ používající syntaxi JavaScript HTML DOM. Měl by však fungovat jako atribut HTML a pomocí metody addEventListener() (viz příklady syntaxe níže).
Syntax
V HTML:
<element onfocusin="myScript">
V JavaScriptu (nemusí fungovat podle očekávání v prohlížečích Chrome, Safari a Opera 15+):
object.onfocusin = function(){myScript};
V JavaScriptu pomocí metody addEventListener():
object.addEventListener("focusin", myScript);
Poznámka: Metoda addEventListener() není podporována v aplikaci Internet Explorer 8 a starších verzích.
Technické údaje
bubliny: | Ano |
---|---|
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í „onfocusin“ společně s událostí „onfocusout“:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Příklad
Delegování události: nastavení parametru useCapture funkce addEventListener() na hodnotu true (pro zaměření a rozmazání):
<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:
<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>