رویداد onfocus
مثال (رویداد onfocus)
اجرا کردن یک تابع جاوااسکریپت هنگامی که فوکس بر روی یک فیلد input منتقل می شود:
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
رویداد onfocus زمانی روی می دهد که فوکس به یک عنصر منتقل می شود.
رویداد onfocus اغلب در تگ های <input> و <select> و <a> استفاده می شود.
رویداد onfocus برعکس رویداد onblur می باشد.
نکته: رویداد onfocus مشابه رویداد onfocusin است. تفاوت اصلی آنها در این است که رویداد onfocus ویژگی bubble را ندارد. اما اگر می خواهید بفهمید که آیا یک عنصر یا فرزندان آن فوکس را گرفته اند یا نه، باید از رویداد onfocusin استفاده کنید.
همچنین شما می توانید این ویژگی را با استفاده از پارامتر useCapture در متد addEventListener() برای رویداد onfocus نیز فعال کنید.
پشتیبانی مرورگرها
| Event | |||||
|---|---|---|---|---|---|
| onfocus | بله | بله | بله | بله | بله |
نحوه استفاده
در HTML:
در جاوااسکریپت:
استفاده از متد addEventListener() در جاوااسکریپت:
نکته: متد addEventListener() در Internet Explorer 8 و ورژن های قدیمی تر آن پشتیبانی نمی شود.
جزئیات تکنیکی
| Bubbles: | خیر |
|---|---|
| Cancelable: | خیر |
| Event type: | FocusEvent |
| Supported HTML tags: | ALL HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
| DOM Version: | Level 2 Events |
مثال - خودتان امتحان کنید
مثال (رویداد onfocus)
استفاده از رویداد onfocus در کنار رویداد onblur:
خودتان امتحان کنید »
مثال (رویداد onfocus)
true کردن پارامتر useCapture در متد addEventListener():
<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>
خودتان امتحان کنید »
مثال (رویداد onfocus)
استفاده از رویداد focusin(در فایرفاکس پشتیبانی نمی شود):
<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>
خودتان امتحان کنید »
مرجع کلیه رویدادهای JavaScript
- نوشته شده توسط احسان عباسی
- بازدید: 7283
