درس‌های انتخابی
کلاس پیشنهادی:
رویداد onfocusin
تفاوت اصلی این است که رویداد onfocus نمی‌تواند پاشنه‌ای شود. بنابراین، اگر می‌خواهید بدانید که آیا یک عنصر یا فرزند آن به تمرکز رسیده است، باید از رویداد onfocusin استفاده کنید.تعریف و استفاده: رویداد onfocusرویداد onfocusin در زمانی که عنصر در حال دریافت تمرکز است رخ می‌دهد.
تفاوت اصلی این است که رویداد onfocus نمی‌تواند پاشنه‌ای شود. بنابراین، اگر می‌خواهید بدانید که آیا یک عنصر یا فرزند آن به تمرکز رسیده است، باید از رویداد onfocusin استفاده کنید.رویداد onfocusin مشابه
تفاوت اصلی این است که رویداد onfocus نمی‌تواند پاشنه‌ای شود. بنابراین، اگر می‌خواهید بدانید که آیا یک عنصر یا فرزند آن به تمرکز رسیده است، باید از رویداد onfocusin استفاده کنید.توجه: اگرچه Firefox رویداد onfocusin را پشتیبانی نمی‌کند، اما می‌توانید با استفاده از شناسه‌دهنده‌ی جلب توجه رویداد onfocus (با استفاده از پارامتر اختیاری useCapture روش addEventListener()) تعیین کنید که آیا فرزند یک عنصر به تمرکز رسیده است. رویداد onfocusoutرویداد onfocusin با
در عکس مخالف.
مثال
مثال 1
اجرای JavaScript وقتی که فیلد ورودی در حال دریافت نقطه‌ی تمرکز است:
<input type="text" onfocusin="myFunction()">
صفحه‌ی پایین اینجا مثالهای بیشتری از TIY دارد.
نحوه‌ی نوشتن
در HTML:< element.addEventListener("focusin",onfocusin="
">
در JavaScript، از روش addEventListener() استفاده کنید:در JavaScript (در Chrome، Safari و Opera 15+ ممکن است به درستی کار نکند):.addEventListener("focusin",.onfocusin = function(){
};
در JavaScript، از روش addEventListener() استفاده کنید:object .addEventListener("focusin",myScript
توجه:); Internet Explorer 8 یا نسخه‌های قبلی آن پشتیبانی نمی‌کندمетод addEventListener()
。
| جزئیات فنی: | پشتیبانی |
|---|---|
| پاشنه‌ای: | قابل لغو: |
| ناپشتیبانی شده: | FocusEvent |
| برچسب‌های HTML پشتیبانی شده: | تمام عناصر HTML، به استثنای：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> و <title> |
| نسخه‌ی DOM: | رویدادهای سطح 2 |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده‌ی نسخه‌ی اولین مرورگر هستند که این رویداد را به طور کامل پشتیبانی می‌کند.
| رویداد | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusin | پشتیبانی | پشتیبانی | 52.0 | پشتیبانی | پشتیبانی |
توجه:رویداد onfocusin ممکن است در مرورگرهای 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>
