onfocus ایوینٹ

DOM ایونٹ FocusEvent

تعریف اور استعمال

onfocus ایوینٹ کس وقت رونما ہوتا ہے جب عنصر کو فونسز کیا جاتا ہے۔

onfocus ایوینٹ زیادہ تر <input>، <select> اور <a> کے ساتھ استعمال کیا جاتا ہے۔

تذکرہ: onfocus ایوینٹ کا استعمال: onblur ایونٹبرعکس

تذکرہ: onfocus ایوینٹ مشابہت: onfocusin ایونٹ۔اس کی اہم فرق یہ ہے کہ onfocus ایوینٹ بولب نہیں ہوتا۔ لہذا اگر آپ کسی عنصر یا اس کے بچوں کو فونسز کا پتہ لگانا چاہتے ہیں تو آپ کو onfocusin ایوینٹ استعمال کریں، لیکن آپ onfocus ایوینٹ پر useCapture استعمال کرسکتے ہیں۔ addEventListener() مہولکا useCapture پارامتر استعمال کرکے اسے کیا جاسکتا ہے۔

مثال

مثال 1

جب انٹرپوئنٹ حاصل کرتا ہے تو جاوا اسکریپت چلائیں:

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

آپ خود کا تجربہ کریں

پینجی پر زیادہ TIY مثال ہیں۔

قواعد

جس میں ایچ تی ایمل میں:

<عنصر onfocus="myScript">

آپ خود کا تجربہ کریں

جس میں جاوا اسکریپت میں:

عنصر.onfocus = function(){myScript};

آپ خود کا تجربہ کریں

جس میں جاوا اسکریپت میں، addEventListener() مہول استعمال کریں:

عنصر.addEventListener("focus", myScript);

آپ خود کا تجربہ کریں

نوٹ:اینٹرنیٹ ایکسپلورر 8 یا اس سے پچھلے ورژن نہیں دعوا کرتا addEventListener() مہول。

جزئیات فنی

شبکه‌ای: پشتیبانی نمی‌شود
قابل لغو: پشتیبانی نمی‌شود
نوع حادثه: FocusEvent
برچسب‌های HTML پشتیبانی شده: تمام عناصر HTML، به استثنای：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> و <title>
نسخه DOM: حادثه‌های سطح 2

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

حادثه Chrome IE Firefox Safari Opera
onfocus پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

مثال‌های بیشتر

مثال 2

استفاده از حوادث onfocus و onblur:

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

آپ خود کا تجربہ کریں

مثال 3

پاک کردن فیلد ورودی تمرکز گرفته شده:

<!-- وقتی که فیلد ورودی تمرکز می‌گیرد، مقدار فعلی آن را با یک رشته خالی جایگزین می‌کند -->
<input type="text" onfocus="this.value=''" value="Blabla">

آپ خود کا تجربہ کریں

مثال 4

حادثه‌های تفویضی: تنظیم پارامتر 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>

آپ خود کا تجربہ کریں

مثال 5

حادثه‌های تفویضی: استفاده از حادثه 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>

آپ خود کا تجربہ کریں

DOM ایونٹ FocusEvent