HTML onblur इवेंट एट्रिब्यूट

परिचय

HTML onblur इवेंट एट्रिब्यूट तब ट्रिगर होता है जब HTML दस्तावेज़ में कोई HTML एलिमेंट फोकस खो देता है। यह फॉर्म वैलिडेशन और यूआई फीडबैक के लिए उपयोगी है।

सिंटैक्स

<tagname onblur="script"></tagname>

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #FBAB7E;
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .show {
    font-size: 1.2rem;
    margin-top: 1rem;
    font-weight: bold;
  }
  textarea {
    width: 80%;
    max-width: 500px;
    padding: 10px;
    margin: 1rem auto;
    display: block;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
  }
</style>
</head>
<body>
<h1>HTML onblur इवेंट एट्रिब्यूट डेमो</h1>
<textarea placeholder="यहां टाइप करें फिर बाहर क्लिक करें" onblur="handleBlur()"></textarea>
<div class="show"></div>
<script>
  function handleBlur() {
    document.querySelector('.show').innerHTML = "आपने फोकस खो दिया (onblur ट्रिगर हुआ)";
  }
</script>
</body>
</html>

आउटपुट

एक टेक्स्टएरिया दिखाई देगा। जब उपयोगकर्ता इसमें क्लिक करता है (फोकस प्राप्त करता है), फिर कहीं और क्लिक करता है (फोकस खो देता है), तो "आपने फोकस खो दिया" संदेश प्रदर्शित होगा।

onblur vs onfocus

इवेंट	ट्रिगर	उपयोग
`onfocus`	एलिमेंट फोकस प्राप्त करता है	हाइलाइट करना, प्लेसहोल्डर छिपाना, टूलटिप दिखाना
`onblur`	एलिमेंट फोकस खोता है	वैलिडेशन, सेव करना, प्लेसहोल्डर दिखाना, UI रीसेट

उपयोग के मामले

फील्ड छोड़ने पर फॉर्म वैलिडेशन
ऑटो-सेव (उपयोगकर्ता फील्ड छोड़ने पर)
प्लेसहोल्डर/लेबल एनिमेशन
टूलटिप/हेल्प टेक्स्ट छिपाना
इनपुट फॉर्मेटिंग (फोन नंबर, करेंसी फॉर्मेट)

उदाहरण: फील्ड छोड़ने पर वैलिडेशन

<input type="email" onblur="validateEmail(this)" placeholder="ईमेल दर्ज करें">
<span class="error"></span>
<script>
  function validateEmail(input) {
    const error = input.nextElementSibling;
    if (input.value && !input.value.includes('@')) {
      error.textContent = 'अमान्य ईमेल प्रारूप';
      error.style.color = 'red';
      input.style.borderColor = 'red';
    } else {
      error.textContent = '';
      input.style.borderColor = '#ccc';
    }
  }
</script>

ब्राउज़र समर्थन

सभी ब्राउज़रों में पूर्ण समर्थन।