ऑनफोकस इवेंट
उदाहरण
किसी इनपुट फ़ील्ड पर फ़ोकस होने पर JavaScript निष्पादित करें:
<input type="text"
onfocus="myFunction()">
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
ऑनफोकस घटना तब होती है जब कोई तत्व फोकस करता है।
ऑनफोकस ईवेंट का उपयोग अक्सर <इनपुट>, <चयन> और <a> के साथ किया जाता है।
युक्ति: ऑनफोकस ईवेंट, ऑनब्लर ईवेंट के विपरीत होता है ।
नुस्ख़ा : ऑनफोकस इवेंट ऑनफोकस इवेंट के समान है । मुख्य अंतर यह है कि ऑनफोकस घटना बबल नहीं करती है। इसलिए, यदि आप यह पता लगाना चाहते हैं कि क्या किसी तत्व या उसके बच्चे पर ध्यान दिया जाता है, तो आप ऑनफोकस घटना का उपयोग कर सकते हैं। हालांकि, आप ऑनफोकस ईवेंट के लिए addEventListener () विधि के वैकल्पिक उपयोग कैप्चर पैरामीटर का उपयोग करके इसे प्राप्त कर सकते हैं ।
ब्राउज़र समर्थन
Event | |||||
---|---|---|---|---|---|
onfocus | Yes | Yes | Yes | Yes | Yes |
वाक्य - विन्यास
एचटीएमएल में:
<element onfocus="myScript">
जावास्क्रिप्ट में:
object.onfocus = function(){myScript};
जावास्क्रिप्ट में, addEventListener() विधि का उपयोग करना:
object.addEventListener("focus", myScript);
नोट: AddEventListener () विधि Internet Explorer 8 और पुराने संस्करणों में समर्थित नहीं है।
टेक्निकल डिटेल
बुलबुले: | नहीं |
---|---|
रद्द करने योग्य: | नहीं |
घटना प्रकार: | फोकसइवेंट |
समर्थित HTML टैग: | सभी HTML तत्व, सिवाय: <आधार>, <bdo>, <br>, <शीर्ष>, <html>, <iframe>, <मेटा>, <परम>, <स्क्रिप्ट>, <शैली>, और <शीर्षक> |
डोम संस्करण: | स्तर 2 कार्यक्रम |
और ज्यादा उदाहरण
उदाहरण
"ऑनफोकस" का उपयोग "ऑनब्लर" ईवेंट के साथ करना:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
उदाहरण
फ़ोकस पर इनपुट फ़ील्ड साफ़ करें:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
उदाहरण
घटना प्रतिनिधिमंडल: 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>