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