درس انتخابی
توصیه‌های آموزشی:
رویداد onfocusout
.تفاوت اصلی این است که رویداد onblur نمی‌تواند بالا بزند. بنابراین، اگر می‌خواهید بفهمید که آیا عنصر یا فرزندان آن از دست داده‌اند، باید از رویداد onfocusout استفاده کنید. تعریف و استفاده: رویداد onblurرویداد onfocusout در زمانی که عنصر در حال از دست دادن فокус است، رخ می‌دهد.
.تفاوت اصلی این است که رویداد onblur نمی‌تواند بالا بزند. بنابراین، اگر می‌خواهید بفهمید که آیا عنصر یا فرزندان آن از دست داده‌اند، باید از رویداد onfocusout استفاده کنید.رویداد onfocusout مشابه
.تفاوت اصلی این است که رویداد onblur نمی‌تواند بالا بزند. بنابراین، اگر می‌خواهید بفهمید که آیا عنصر یا فرزندان آن از دست داده‌اند، باید از رویداد onfocusout استفاده کنید. با وجود اینکه فایرفاکس رویداد onfocusout را پشتیبانی نمی‌کند، می‌توانید با استفاده از شنونده‌های کشف رویداد onblur (با استفاده از پارامتر اختیاری useCapture متد addEventListener()) بفهمید که آیا فرزند یک عنصر از دست داده است یا خیر. رویداد onfocusinتوجه:
رویداد onfocusout با
عکس‌العمل مخالف.
مثال
مثال 1
جاوااسکریپت را در زمانی که فیلد ورودی در حال از دست دادن فокус است، اجرا می‌کند:
<input type="text" onfocusout="myFunction()">
در پایین صفحه نمونه‌های بیشتری از TIY وجود دارد.
نحوه استفاده:در HTML: <.addEventListener("focusout",عنصر
onfocusout="
};">.addEventListener("focusout",در جاوااسکریپت (ممکن است در کروم، سافاری و اپرا 15+ به انتظار نرود):
.onfocusout = function(){
};در جاوااسکریپت، از متد addEventListener() استفاده می‌شود: .addEventListener("focusout",myScript
توجه:); اینترنت اکسپلورر 8 یا نسخه‌های قبلی آن پشتیبانی نمی‌کندمتد addEventListener()
.
| جزئیات فنی: | پشتیبانی |
|---|---|
| بالا زدن: | قابل لغو: |
| نپشتیبانی می‌شود: | FocusEvent |
| برچسب‌های HTML پشتیبانی شده: | تمام عناصر HTML، به استثنای：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> و <title> |
| نسخه‌ی DOM: | رویدادهای سطح 2 |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده‌ی نسخه‌ی اولین مرورگر هستند که این رویداد را به طور کامل پشتیبانی می‌کند.
| رویداد | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | پشتیبانی | پشتیبانی | 52.0 | پشتیبانی | پشتیبانی |
توجه:رویداد onfocusout ممکن است در مرورگرهای Chrome، Safari و Opera 15+ با انتظارات شما کار نکند. اما باید به عنوان ویژگی HTML و با استفاده از روش addEventListener() (لطفاً به مثال‌های زیر مراجعه کنید) استفاده شود.
مثال‌های بیشتری
مثال 2
استفاده از رویدادهای "onfocusin" و "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
مثال 3
پیش‌بینی‌کننده‌ی رویداد: تنظیم پارامتر useCapture در addEventListener() به true (برای focus و 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>
مثال 4
پیش‌بینی‌کننده‌ی رویداد: استفاده از رویداد focusin:
<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>
