پیشنهاد درس:
رویداد onfocusin
تعریف و استفاده
با این حال،虽然 Firefox رویداد onfocusin را پشتیبانی نمیکند، شما میتوانید با استفاده از شناسهدهندههای جلب توجه رویداد onfocus (با استفاده از پارامتر اختیاری useCapture متد addEventListener()) مشخص کنید که آیا فرزند یک عنصر به تمرکز رسیده است یا خیر.رویداد onfocusin در زمانی که عنصر در حال دریافت تمرکز است، رخ میدهد. onfocus ایونٹرویداد onfocusin مشابه
با این حال،虽然 Firefox رویداد onfocusin را پشتیبانی نمیکند، شما میتوانید با استفاده از شناسهدهندههای جلب توجه رویداد onfocus (با استفاده از پارامتر اختیاری useCapture متد addEventListener()) مشخص کنید که آیا فرزند یک عنصر به تمرکز رسیده است یا خیر.فرق اصلی این است که رویداد 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+ با استفاده از زبان JavaScript HTML DOM به درستی کار نکند. اما باید به عنوان ویژگی HTML استفاده شود و با استفاده از روش addEventListener() (لطفاً به مثالهای زیر مراجعه کنید) استفاده شود.
مثالهای بیشتر
مثال 2
استفاده از واقعه onfocusin و onfocusout:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
مثال 3
استفاده از واقعه focusin و 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>
