onfocusin Olayı
Örnek
Bir giriş alanı odaklanmak üzereyken bir JavaScript yürütün:
<input type="text"
onfocusin="myFunction()">
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Onfocusin olayı, bir öğe odaklanmak üzereyken meydana gelir.
İpucu: onfocusin olayı, onfocus olayına benzer. Temel fark, onfocus olayının balonlanmamasıdır. Bu nedenle, bir öğenin mi yoksa alt öğesinin mi odak aldığını öğrenmek istiyorsanız, onfocusin olayını kullanmalısınız.
İpucu: onfocusin olayı , onfocusout olayının tersidir.
Tarayıcı Desteği
Tablodaki sayılar, olayı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Event | |||||
---|---|---|---|---|---|
onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Not: onfocusin olayı , JavaScript HTML DOM sözdizimi kullanılarak Chrome, Safari ve Opera 15+ sürümlerinde beklendiği gibi çalışmayabilir . Ancak, bir HTML niteliği olarak ve addEventListener() yöntemini kullanarak çalışmalıdır (Aşağıdaki sözdizimi örneklerine bakın).
Sözdizimi
HTML'de:
<element onfocusin="myScript">
JavaScript'te (Chrome, Safari ve Opera 15+'te beklendiği gibi çalışmayabilir):
object.onfocusin = function(){myScript};
JavaScript'te, addEventListener() yöntemini kullanarak:
object.addEventListener("focusin", myScript);
Not: addEventListener () yöntemi, Internet Explorer 8 ve önceki sürümlerde desteklenmez.
Teknik detaylar
kabarcıklar: | Evet |
---|---|
İptal edilebilir: | Numara |
Etkinlik tipi: | FocusEtkinlik |
Desteklenen HTML etiketleri: | TÜM HTML öğeleri, HARİÇ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ve <title> |
DOM Sürümü: | 2. Seviye Etkinlikleri |
Daha fazla örnek
Örnek
"onfocusin" ile "onfocusout" olayının birlikte kullanılması:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Örnek
Olay delegasyonu: addEventListener() öğesinin useCapture parametresini true olarak ayarlama (odak ve bulanıklık için):
<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>
Örnek
Etkinlik delegasyonu: focusin olayını kullanma:
<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>