رویداد onfocusin
مثال (رویداد onfocusin)
اجرا کردن یک تابع جاوااسکریپت هنگامی که یک فیلد input، در آستانه ی گرفتن فوکس می باشد:
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
رویداد onfocusin زمانی روی می دهد که یک عنصر در آستانه ی گرفتن فوکس می باشد.
نکته: رویداد onfocusin مشابه رویداد onfocus است. تفاوت اصلی آنها این است که رویداد onfocus ویژگی bubble را ندارد. بنابراین اگر شما می خواهید بفهمید که آیا یک عنصر یا فرزند آن فوکس را گرفته اند یا نه، باید از رویداد onfocusin استفاده کنید.
نکته: اگرچه مرورگر فایرفاکس از رویداد onfocusin پشتیبانی نمی کند اما شما می توانید از پارامتر useCapture برای رویداد onfocus در متد addEventListener() استفاده کنید. بدین صورت شما می توانید بفهمید که آیا فرزند یک عنصر فوکس را گرفته است یا نه.
نکته: رویداد onfocusin برعکس رویداد onfocusout می باشد.
پشتیبانی مرورگرها
| Event | |||||
|---|---|---|---|---|---|
| onfocusin | بله | بله | پشتیبانی نمی شود | بله | بله |
نکته: نحوه ی کاربرد رویداد onfocusin در DOM ممکن است برخلاف آنچه که از آن انتظار می رود در مرورگرهای های کروم و سفری و اپرا 15+ متفاوت باشد. اما این رویداد می تواند در متد addEventListener() مانند یک خصوصیت HTML استفاده شود.
نحوه استفاده
در HTML:
در جاوااسکریپت(ممکن است آن طور که از آن انتظار می رود در مرورگرهای کروم و سفری و اپرا 15+ کار نکند).
استفاده از متد 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 |
مثال - خودتان امتحان کنید
مثال (رویداد onfocusin)
استفاده از رویداد onfocusin در کنار رویداد onfocusout:
خودتان امتحان کنید »
مثال (رویداد onfocusin)
true کردن پارامتر useCapture در متد addEventListener() برای focus و blur:
<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>
خودتان امتحان کنید »
مثال (رویداد onfocusin)
استفاده از رویداد 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
- نوشته شده توسط احسان عباسی
- بازدید: 4882
