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