onfocus इवेंट

DOM इवेंट FocusEvent

परिभाषा और उपयोग

इलीमेंट फोकस प्राप्त करते हैं जब onfocus इवेंट होता है。

onfocus इवेंट सबसे अधिक <input>、<select> और <a> के साथ उपयोग किया जाता है。

सूचना: onfocus इवेंट इसके साथ onblur इवेंटविपरीत

सूचना: onfocus इवेंट इसी प्रकार है onfocusin इवेंट।मुख्य अंतर यह है कि onfocus इवेंट बुबलिंग नहीं करता। इसलिए यदि आप एक एलीमेंट या इसके उपसंख्याक एलीमेंट को फोकस प्राप्त करने का पता लगाना चाहते हैं तो onfocusin इवेंट का उपयोग करें। लेकिन आप onfocus इवेंट का उपयोग करके addEventListener() विधिका useCapture पारामीटर का उपयोग करके इसे करना है।

इन्स्टांस

उदाहरण 1

जब इनपुट फील्ड फोकस प्राप्त करता है तो जावास्क्रिप्ट चलाएं:

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

अपने आप से प्रयोग करें

पृष्ठ के नीचे अधिक TIY उदाहरण हैं。

व्याकरण

HTML में:

<एलीमेंट 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

इवेंट डेलीगेशन: addEventListener() के useCapture पैरामीट को 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