رویداد onblur

DOM ਈਵੈਂਟ FocusEvent

تعریف و استفاده

رویداد onblur وقتی یک شی از تمرکز خارج می‌شود رخ می‌دهد.

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

توجه: رویداد onblur با onfocus ਈਵੈਂਟبرعکس.

توجه: رویداد onblur مشابه onfocusout ਈਵੈਂਟدر حالی که تفاوت اصلی این است که رویداد onblur نمی‌تواند به بالا بپیماید. بنابراین، اگر می‌خواهید بررسی کنید که آیا عنصر یا فرزندان آن از تمرکز خارج شده‌اند یا خیر، می‌توانید از رویداد onfocusout استفاده کنید. اما شما می‌توانید با استفاده از رویداد onblur، addEventListener() methodپارامتر useCapture (اختیاری) برای این منظور استفاده می‌شود.

example

اجرای جاوااسکریپت وقتی کاربر از فیلد ورودی خارج می‌شود:

<input type="text" onblur="myFunction()">

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

صفحه پایین بیشتر مثال‌های TIY را دارد.

نویسی

در HTML:

<element onblur="myScript">

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

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

object.onblur = function(){}myScript};

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

in JavaScript, use the addEventListener() method:

object.addEventListener("blur", myScript);

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

note:Internet Explorer 8 or earlier versions do not support addEventListener() method.

technical details

bubbling: not supported
cancellable: not supported
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

browser support

event Chrome IE Firefox Safari Opera
onblur supported supported supported supported supported

more examples

example

use "onblur" and "onfocus" events together:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

example

event delegation: set the useCapture parameter of addEventListener() to 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>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

example

event delegation: use focusin event (Firefox does not support):

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

DOM ਈਵੈਂਟ FocusEvent