कोर्स प्रस्तावना:
onfocusin इवेंट
वर्णन और उपयोग
यद्यपि Firefox onfocusin इवेंट को समर्थित नहीं करता, आप onfocus इवेंट के कैच लिस्टनर (addEventListener() विधि के वैकल्पिक useCapture पारामीटर) का उपयोग करके एलीमेंट के उप-एलीमेंट को फोकस प्राप्त करने का पता लगा सकते हैं।onfocusin इवेंट एलीमेंट को फोकस प्राप्त करने के समय होता है。 onfocus इवेंटonfocusin इवेंट के समान
यद्यपि Firefox onfocusin इवेंट को समर्थित नहीं करता, आप onfocus इवेंट के कैच लिस्टनर (addEventListener() विधि के वैकल्पिक useCapture पारामीटर) का उपयोग करके एलीमेंट के उप-एलीमेंट को फोकस प्राप्त करने का पता लगा सकते हैं।।मुख्य अंतर onfocus इवेंट नहीं बुबल होता है।इसलिए यदि आप एक एलीमेंट या उसके उप-एलीमेंट को फोकस प्राप्त करने का पता लगाना चाहते हैं, तो आपको onfocusin इवेंट का उपयोग करना चाहिए।
यद्यपि Firefox onfocusin इवेंट को समर्थित नहीं करता, आप onfocus इवेंट के कैच लिस्टनर (addEventListener() विधि के वैकल्पिक useCapture पारामीटर) का उपयोग करके एलीमेंट के उप-एलीमेंट को फोकस प्राप्त करने का पता लगा सकते हैं।सूचना: onfocusout इवेंटonfocusin इवेंट के साथ
विपरीत。
उदाहरण
उदाहरण 1
जब इनपुट फील्ड फोकस प्राप्त करने वाला है तो जेस्क्रिप्ट चलाएं:
<input type="text" onfocusin="myFunction()">
पृष्ठ के नीचे अधिक TIY उदाहरण हैं。
व्याकरण
HTML में:< element.addEventListener("focusin",onfocusin="
">
जेस्क्रिप्ट में, addEventListener() विधि का उपयोग करके:जेस्क्रिप्ट में (Chrome, Safari और Opera 15+ में सही ढंग से काम नहीं कर सकता):.addEventListener("focusin",.onfocusin = function(){
};
जेस्क्रिप्ट में, addEventListener() विधि का उपयोग करके:object .addEventListener("focusin",myScript
टिप्पणी:); Internet Explorer 8 या अधिक पुरानी संस्करण इसे समर्थित नहीं करतेaddEventListener() विधि
。
| तकनीकी विवरण | समर्थन |
|---|---|
| बुबलिंग: | रद्द करने योग्य: |
| असमर्थित | FocusEvent |
| समर्थित HTML टैग्स: | सभी HTML एलीमेंट्स, छोड़कर: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> और <title> |
| DOM संस्करण: | स्तर 2 इवेंट |
ब्राउज़र समर्थन
शीट में की गई संख्याओं ने इस इवेंट को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र आरंभ वाले संस्करण को निर्दिष्ट करती हैं।
| इवेंट | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusin | समर्थन | समर्थन | 52.0 | समर्थन | समर्थन |
टिप्पणी:onfocusin इवेंट Chrome, Safari और Opera 15+ में JavaScript HTML DOM व्याकरण का उपयोग करते हुए संभवतः अपेक्षित ढंग से काम नहीं कर सकता है। लेकिन, यह HTML गुण के रूप में और addEventListener() विधि का उपयोग करके (नीचे के व्याकरण उदाहरण को देखें) किया जाना चाहिए。
और अधिक उदाहरण
उदाहरण 2
"onfocusin" और "onfocusout" इवेंट को साथ में उपयोग करना:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
उदाहरण 3
इवेंट डेलीगेशन: addEventListener() के useCapture पैरामीट को true सेट करना (focus और blur के लिए):
<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>
उदाहरण 4
इवेंट डेलीगेशन: focusin इवेंट का उपयोग करने के लिए:
<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>
