ऑनफोकसिन इवेंट
उदाहरण
जब कोई इनपुट फ़ील्ड फ़ोकस करने वाला हो तो JavaScript निष्पादित करें:
<input type="text"
onfocusin="myFunction()">
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
ऑनफोकसिन घटना तब होती है जब कोई तत्व फोकस प्राप्त करने वाला होता है।
युक्ति: ऑनफोकस इवेंट ऑनफोकस इवेंट के समान है । मुख्य अंतर यह है कि ऑनफोकस घटना बबल नहीं करती है। इसलिए, यदि आप यह पता लगाना चाहते हैं कि क्या किसी तत्व या उसके बच्चे पर ध्यान दिया जाता है, तो आपको ऑनफोकस घटना का उपयोग करना चाहिए।
टिप: ऑनफोकसइन इवेंट, ऑनफोकसआउट इवेंट के विपरीत होता है ।
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से ईवेंट का समर्थन करता है।
Event | |||||
---|---|---|---|---|---|
onfocusin | Yes | Yes | 52.0 | Yes | Yes |
नोट: हो सकता है कि जावास्क्रिप्ट HTML DOM सिंटैक्स का उपयोग करके ऑनफोकसिन इवेंट क्रोम, सफारी और ओपेरा 15+ में अपेक्षित रूप से काम न करे। हालांकि, इसे HTML विशेषता के रूप में और addEventListener() विधि का उपयोग करके काम करना चाहिए (नीचे सिंटैक्स उदाहरण देखें)।
वाक्य - विन्यास
एचटीएमएल में:
<element onfocusin="myScript">
जावास्क्रिप्ट में (क्रोम, सफारी और ओपेरा 15+ में अपेक्षित रूप से काम नहीं कर सकता है):
object.onfocusin = function(){myScript};
जावास्क्रिप्ट में, addEventListener() विधि का उपयोग करना:
object.addEventListener("focusin", myScript);
नोट: AddEventListener () विधि Internet Explorer 8 और पुराने संस्करणों में समर्थित नहीं है।
टेक्निकल डिटेल
बुलबुले: | हां |
---|---|
रद्द करने योग्य: | नहीं |
घटना प्रकार: | फोकसइवेंट |
समर्थित HTML टैग: | सभी HTML तत्व, सिवाय: <आधार>, <bdo>, <br>, <शीर्ष>, <html>, <iframe>, <मेटा>, <परम>, <स्क्रिप्ट>, <शैली>, और <शीर्षक> |
डोम संस्करण: | स्तर 2 कार्यक्रम |
और ज्यादा उदाहरण
उदाहरण
"ऑनफोकसआउट" ईवेंट के साथ "ऑनफोकसिन" का उपयोग करना:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
उदाहरण
घटना प्रतिनिधिमंडल: addEventListener() के उपयोग कैप्चर पैरामीटर को सत्य पर सेट करना (फोकस और ब्लर के लिए) :
<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>
उदाहरण
इवेंट डेलिगेशन: फोकसिन इवेंट का उपयोग करना:
<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>