कोडडब्ल्यू३सी ऑनलाइन ट्यूटोरियल
  • एचटीएमएल श्रृंखला ट्यूटोरियल
  • ब्राउज़र स्क्रिप्ट
  • सर्वर स्क्रिप्ट
  • प्रोग्रामिंग ट्यूटोरियल
  • एक्सएमएल श्रृंखला ट्यूटोरियल
  • वेबसाइट बुकमैन
  • रेफरेंस मैनुअल

कक्षा सूची

JS संदर्भ पुस्तक

  • JS संदर्भ पुस्तक (श्रेणी क्रम)
  • JS संदर्भ पुस्तक (अक्षरगणना क्रम)

JavaScript

  • JS Array
  • JS Boolean
  • JS Class
  • JS Date
  • JS Error
  • JS Global
  • JS JSON
  • JS Map
  • JS Math
  • JS Number
  • JS Promise
  • JS RegExp
  • JS Set
  • JS String
  • JS ऑब्जैक्ट
  • JS ऑपरेटर
  • JS ऑपरेटर प्राथमिकता
  • JS स्टेटमेंट
  • JS टाइपाइज़ एरे

Window

  • विंडो ऑब्जैक्ट
  • Window Console
  • Window History
  • Window Location
  • Window Navigator
  • Window Screen

HTML DOM

  • HTML Document
  • HTML Element
  • HTML Attribute
  • HTML Event
  • HTML Event ऑब्जैक्ट
  • HTML Collection
  • HTML NodeList
  • HTML DOMTokenList
  • HTML Style

Web API

  • API Canvas
  • API Console
  • API Fetch
  • API Fullscreen
  • API Geolocation
  • API History
  • API MediaQueryList
  • API Storage
  • API Validation
  • API वेब

HTML ऑब्जैक्ट

  • <a>
  • <abbr>
  • <address>
  • <area>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
  • <bdo>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <datalist>
  • <dd>
  • <del>
  • <details>
  • <dfn>
  • <dialog>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <head>
  • <header>
  • <h1> - <h6>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <ins>
  • <input> button
  • <input> checkbox
  • <input> color
  • <input> date
  • <input> datetime
  • <input> datetime-local
  • <input> email
  • <input> file
  • <input> hidden
  • <input> image
  • <input> month
  • <input> number
  • <input> password
  • <input> radio
  • <input> range
  • <input> reset
  • <input> search
  • <input> submit
  • <input> text
  • <input> time
  • <input> url
  • <input> week
  • <kbd>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <map>
  • <mark>
  • <menu>
  • <menuitem>
  • <meta>
  • <meter>
  • <nav>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <param>
  • <pre>
  • <progress>
  • <q>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <small>
  • <source>
  • <span>
  • <strong>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <tfoot>
  • <th>
  • <thead>
  • <tr>
  • <textarea>
  • <time>
  • <title>
  • <track>
  • <u>
  • <ul>
  • <var>
  • <video>

    • अन्य संदर्भ निर्देशिका
    • CSSStyleDeclaration

    JS टाइप कनवर्शन

    वैकल्पिक पाठ्यक्रम

    • CodeW3C.com का बागल

    कोर्स सिफारिश:

    DOM घटना FocusEvent

    onfocusout इवेंट

    वर्णन और उपयोग

    यद्यपि Firefox onfocusout इवेंट को समर्थित नहीं करता, आप onblur इवेंट के कैच लिस्टनर (addEventListener() विधि के वैकल्पिक useCapture पारामीटर) का उपयोग करके आयात कर सकते हैं कि एलिमेंट के उप-एलिमेंट फोकस खोते हैं या नहीं। onfocusout इवेंट जब एलिमेंट जल्दी ही फोकस खोता है तब होता है。 onblur घटनाonfocusout इवेंट जैसा है

    यद्यपि Firefox onfocusout इवेंट को समर्थित नहीं करता, आप onblur इवेंट के कैच लिस्टनर (addEventListener() विधि के वैकल्पिक useCapture पारामीटर) का उपयोग करके आयात कर सकते हैं कि एलिमेंट के उप-एलिमेंट फोकस खोते हैं या नहीं।।मुख्य अंतर कि onblur इवेंट नहीं बुबल करता।इसलिए यदि आप एलिमेंट या उसके उप-एलिमेंट को फोकस खोने का पता लगाना चाहते हैं तो onfocusout इवेंट का उपयोग करें।

    यद्यपि Firefox onfocusout इवेंट को समर्थित नहीं करता, आप onblur इवेंट के कैच लिस्टनर (addEventListener() विधि के वैकल्पिक useCapture पारामीटर) का उपयोग करके आयात कर सकते हैं कि एलिमेंट के उप-एलिमेंट फोकस खोते हैं या नहीं। सुझाव: onfocusin घटनाonfocusout इवेंट के साथ

    विपरीत

    उदाहरण

    उदाहरण 1

    जब इनपुट फील्ड जल्दी ही फोकस खोता है तब जेसक्रिप्ट चलाएं:
    

    अपने आप सिर्फ आयात करें

    <input type="text" onfocusout="myFunction()">

    पृष्ठ के नीचे अधिक TIY उदाहरण हैं。

    व्याकरण

    HTML में:< element.addEventListener("focusout",onfocusout="
    

    अपने आप सिर्फ आयात करें

    ">

    जेसक्रिप्ट में, addEventListener() विधि का उपयोग करके:In JavaScript (Chrome, Safari और Opera 15+ में इसका अपेक्षित कामकाज नहीं कर सकता):.addEventListener("focusout",.onfocusout = function(){
    

    अपने आप सिर्फ आयात करें

    };

    जेसक्रिप्ट में, addEventListener() विधि का उपयोग करके:object .addEventListener("focusout",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
onfocusout समर्थन समर्थन 52.0 समर्थन समर्थन

टिप्पणी:onfocusout इवेंट 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>

अपने आप सिर्फ आयात करें

DOM घटना FocusEvent

टूलबॉक्स

जेसक्रिप्ट और एचटीएमएल डॉम रेफरेंस मैनुअल
JavaScript उदाहरण
JavaScript टेस्ट
JavaScript शिक्षा

सापोर्टर लिंक

कोड W3C.com द्वारा प्रदान की गई सामग्री केवल प्रशिक्षण और परीक्षण के लिए है, सामग्री की सहीता का अनुमान नहीं लगाया जाता है।इस साइट के साथ उपयोग से उत्पन्न होने वाले जोखिम इस साइट से नहीं हैं।सर्वस्वामित्व, सभी अधिकार अवधारित हैं।

कोड W3C.com के बारे में कोड W3C.com की मदद उपयोग शर्त गोपनीयता शर्त सीई4ई.कॉम पर पॉवर्ड