Exemplu
Executați un JavaScript atunci când un câmp de intrare este pe cale să se concentreze:
<input type="text"
onfocusin="myFunction()"> Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Evenimentul onfocusin are loc atunci când un element este pe cale să se concentreze.
Sfat: Evenimentul onfocusin este similar cu onfocus eveniment. Principala diferență este că evenimentul onfocus nu cu bule. Prin urmare, dacă doriți să aflați dacă un element sau copilul său devine punctul central, ar trebui să utilizați evenimentul onfocusin.
Sfat: Deși Firefox nu acceptă evenimentul onfocusin, puteți afla dacă un copil al unui element devine punctul central sau nu, prin utilizarea unui ascultător de capturare pentru onfocus eveniment (folosind parametrul useCapture opțional al addEventListener() metoda).
Tip: Evenimentul onfocusin este opusul onfocusout evenimentului.
Suport pentru browser-
| Eveniment | |||||
|---|---|---|---|---|---|
| onfocusin | da | da | Nu sunt acceptate | da | da |
Notă: Evenimentul onfocusin poate să nu funcționeze conform așteptărilor în Chrome, Safari și Opera 15+ , folosind sintaxa HTML JavaScript DOM. Cu toate acestea, ar trebui să funcționeze ca un atribut HTML și folosind addEventListener() metoda.
Sintaxă
In HTML:
< Încearcă - l singur » În JavaScript (may not work as expected in Chrome, Safari and Opera 15+) să (may not work as expected in Chrome, Safari and Opera 15+) :
object .onfocusin=function(){ Încearcă - l singur » În JavaScript, folosind addEventListener() metoda:
object .addEventListener("focusin", myScript );
Încearcă - l singur » Notă: addEventListener() , metoda nu este acceptată în Internet Explorer 8 și versiunile anterioare.
Detalii tehnice
| Bule: | da |
|---|---|
| anulabil: | Nu |
| Tip de eveniment: | FocusEvent |
| Tag-uri HTML acceptate: | Toate elementele HTML, cu excepția: <bază>, <BDO>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> și <title> |
| DOM Versiune: | Nivelul 2 Evenimente |
Mai multe exemple
Exemplu
Folosind "onfocusin" împreună cu "onfocusout" eveniment:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Încearcă - l singur » Exemplu
Eveniment delegare: setarea parametrului useCapture de addEventListener() la true (for focus and blur) :
<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>
Încearcă - l singur » Exemplu
Eveniment delegare: folosind evenimentul focusin (nu este acceptat de 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>
Încearcă - l singur » <Eveniment obiect