HTML DOM टेक्स्टएरिया autofocus प्रॉपर्टी: ऑटो फोकस नियंत्रित करना

HTML DOM टेक्स्टएरिया autofocus प्रॉपर्टी लौटाती और संशोधित करती है कि पेज लोड होने पर टेक्स्ट एरिया को ऑटोमेटिकली फोकस मिलना चाहिए या नहीं।

सिंटैक्स

1. autofocus प्राप्त करना:

object.autofocus

2. autofocus संशोधित करना:

object.autofocus = true | false

उदाहरण: ऑटोफोकस अक्षम करना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
<body>
  <h1>DOM टेक्स्टएरिया autofocus प्रॉपर्टी डेमो</h1>
  <textarea autofocus>नमस्ते! मैं कुछ डमी टेक्स्ट के साथ एक टेक्स्ट एरिया एलिमेंट हूँ।</textarea>
  <button onclick="set()" class="btn">ऑटोफोकस अक्षम करें</button>
  <script>
    function set() {
      document.querySelector("textarea").autofocus = false;
    }
  </script>
</body>
</html>

आउटपुट

1. पेज लोड: टेक्स्टएरिया में कर्सर स्वचालित रूप से दिखाई देता है (autofocus=true)
2. "ऑटोफोकस अक्षम करें" क्लिक: भविष्य के लोड के लिए autofocus=false सेट हो जाता है
3. पुनः लोड: कर्सर टेक्स्टएरिया में नहीं दिखाई देता

autofocus के महत्वपूर्ण बिंदु

• बूलियन एट्रिब्यूट: HTML में <textarea autofocus> लिखना पर्याप्त है
• एक प्रति पेज: केवल एक एलिमेंट में autofocus होना चाहिए (ब्राउज़र पहले को चुनता है)
• उपयोगकर्ता अनुभव: मोबाइल पर कीबोर्ड स्वचालित खुल सकता है - सावधानी से उपयोग करें
• एक्सेसिबिलिटी: स्क्रीन रीडर यूज़र्स को अचानक फोकस परिवर्तन भ्रमित कर सकता है

जावास्क्रिप्ट से नियंत्रण

// जांचना
if (textarea.autofocus) { ... }

// सक्षम करना
textarea.autofocus = true;

// अक्षम करना
textarea.autofocus = false;

// HTML एट्रिब्यूट से अलग:
// textarea.hasAttribute('autofocus') - HTML में उपस्थिति जांचता है
// textarea.autofocus - वर्तमान स्थिति (JS परिवर्तनों सहित)

फोकस मेथड्स (तत्काल फोकस के लिए)

// तत्काल फोकस सेट करना (autofocus के विपरीत, यह तुरंत काम करता है)
textarea.focus();

// फोकस हटाना
textarea.blur();

// फोकस स्थिति जांचना
document.activeElement === textarea