odak olay
Örnek
Bir giriş alanı odaklandığında bir JavaScript yürütün:
<input type="text"
onfocus="myFunction()">
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Onfocus olayı, bir öğeye odaklanıldığında gerçekleşir.
Odaklanma olayı en sık <input>, <select> ve <a> ile kullanılır.
İpucu: onfocus olayı, onblur olayının tersidir.
İpucu: onfocus olayı, onfocusin olayına benzer . Temel fark, onfocus olayının balonlanmamasıdır. Bu nedenle, bir öğenin mi yoksa alt öğesinin mi odağı aldığını öğrenmek istiyorsanız, onfocusin olayını kullanabilirsiniz. Ancak, onfocus olayı için addEventListener() yönteminin isteğe bağlı useCapture parametresini kullanarak bunu başarabilirsiniz .
Tarayıcı Desteği
| Event | |||||
|---|---|---|---|---|---|
| onfocus | Yes | Yes | Yes | Yes | Yes |
Sözdizimi
HTML'de:
<element onfocus="myScript">
JavaScript'te:
object.onfocus = function(){myScript};
JavaScript'te, addEventListener() yöntemini kullanarak:
object.addEventListener("focus", myScript);
Not: addEventListener () yöntemi, Internet Explorer 8 ve önceki sürümlerde desteklenmez.
Teknik detaylar
| kabarcıklar: | Numara |
|---|---|
| İ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
"onblur" olayı ile birlikte "onfocus" kullanımı:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Örnek
Odaktaki giriş alanını temizle:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
Örnek
Olay delegasyonu: addEventListener() öğesinin useCapture parametresini true olarak ayarlama:
<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 (Firefox tarafından desteklenmez):
<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>