رویداد onblur

مثال (رویداد onblur)

اجرا کردن یک تابع جاوااسکریپت هنگامی که یک کاربر، فیلد input را ترک می کند:

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

رویداد onblur زمانی روی می دهد که یک شیء focus(فوکس) را از دست می دهد.

رویداد onblur اکثر اوقات با کد اعتبار سنجی فرم استفاده می شود(بعنوان مثال وقتی که کاربر یک فیلد از فرم را ترک می کند).

نکته: رویداد onblur برعکس رویداد onfocus می باشد.

نکته: رویداد onblur شبیه رویداد onfocusout است. تفاوت اصلی آنها در این است که، رویداد onblur ویژگی bubble را ندارد . بنابراین در صورتی که شما می خواهید بفهمید که چه زمانی یک عنصر یا فرزندان آن focus را از دست می دهند شما می توانید از رویداد onfocusout استفاده کنید اما شما می توانید این ویژگی را با استفاده از پارامتر اختیاری UseCapture در متد addEventListener برای رویداد onblur فعال کنید.

پشتیبانی مرورگرها

Event
onblur	بله	بله	بله	بله	بله

نحوه استفاده

در HTML:

<element onblur="myScript">امتحان کنید

در جاوااسکریپت:

object.onblur=function(){myScript};امتحان کنید

استفاده از متد addEventListener() در جاوااسکریپت:

object.addEventListener("blur", myScript);امتحان کنید

نکته: متد 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

مثال - خودتان امتحان کنید

مثال (رویداد onblur)

استفاده از رویداد onblur در کنار رویداد onfocus:

خودتان امتحان کنید »

مثال (رویداد onblur)

ست کردن پارامتر useCapture به true، در متد addEventListener():

<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>

خودتان امتحان کنید »

مثال (رویداد onblur)

استفاده از رویداد 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>

خودتان امتحان کنید »

مرجع کلیه رویدادهای JavaScript

: نوشته شده توسط احسان عباسی; بازدید: 8901

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی