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