رویداد onblur
مثال (رویداد onblur)
اجرا کردن یک تابع جاوااسکریپت هنگامی که یک کاربر، فیلد input را ترک می کند:
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
رویداد onblur زمانی روی می دهد که یک شیء focus(فوکس) را از دست می دهد.
رویداد onblur اکثر اوقات با کد اعتبار سنجی فرم استفاده می شود(بعنوان مثال وقتی که کاربر یک فیلد از فرم را ترک می کند).
نکته: رویداد onblur برعکس رویداد onfocus می باشد.
نکته: رویداد onblur شبیه رویداد onfocusout است. تفاوت اصلی آنها در این است که، رویداد onblur ویژگی bubble را ندارد . بنابراین در صورتی که شما می خواهید بفهمید که چه زمانی یک عنصر یا فرزندان آن focus را از دست می دهند شما می توانید از رویداد onfocusout استفاده کنید اما شما می توانید این ویژگی را با استفاده از پارامتر اختیاری UseCapture در متد addEventListener برای رویداد onblur فعال کنید.
پشتیبانی مرورگرها
| Event | |||||
|---|---|---|---|---|---|
| onblur | بله | بله | بله | بله | بله |
نحوه استفاده
در HTML:
در جاوااسکریپت:
استفاده از متد addEventListener() در جاوااسکریپت:
نکته: متد 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():
<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(در فایرفاکس پشتیبانی نمی شود):
<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
- نوشته شده توسط احسان عباسی
- بازدید: 9210
