HTML DOM Select autofocus Property - ड्रॉप-डाउन ऑटोफोकस

HTML DOM Select autofocus Property

HTML DOM select autofocus property तय करती है कि पेज लोड होने पर ड्रॉप-डाउन सूची स्वचालित रूप से फोकस प्राप्त करेगी या नहीं। यह boolean मान (true/false) प्राप्त या सेट करती है।

Syntax

ऑटोफोकस स्थिति प्राप्त करना:

selectObject.autofocus

ऑटोफोकस स्थिति सेट करना:

selectObject.autofocus = true | false

उदाहरण

ड्रॉप-डाउन पर ऑटोफोकस अक्षम करना:

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM autofocus property</title>
<style>
  body {
    text-align: center;
    color: #fff;
    background: radial-gradient(circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90%) no-repeat;
    height: 100vh;
  }
  p { font-weight: 700; font-size: 1.1rem; }
  .drop-down {
    display: block;
    width: 35%;
    border: none;
    font-weight: bold;
    padding: 10px;
    margin: 1rem auto;
    background-color: #ffffff7a;
    outline-color: black;
  }
  .btn {
    background: orange;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    font-weight: bold;
    outline: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>autofocus Property Example</h1>
<p>नमस्ते, अपना पसंदीदा विषय चुनें:</p>
<select class='drop-down' name="Drop Down List">
  <option>Physics</option>
  <option>Maths</option>
  <option>Chemistry</option>
  <option>English</option>
  <option>Economics</option>
  <option>Hindi</option>
  <option>Biology</option>
</select>
<br>
<button onclick="disable()" class="btn">ऑटोफोकस अक्षम करें</button>
<script>
  function disable() {
    document.querySelector(".drop-down").autofocus = false;
  }
</script>
</body>
</html>

आउटपुट

पेज लोड होने पर ड्रॉप-डाउन स्वचालित रूप से फोकस प्राप्त करता है। "ऑटोफोकस अक्षम करें" बटन क्लिक करने पर ऑटोफोकस अक्षम हो जाता है।

मुख्य बिंदु

• autofocus property boolean मान (true/false) स्वीकार करता है
• HTML में autofocus attribute उपस्थित होने पर डिफ़ॉल्ट रूप से true होता है
• एक पेज पर केवल एक एलिमेंट में autofocus होना चाहिए
• JavaScript से डायनामिकली ऑटोफोकस जोड़ा/हटाया जा सकता है
• ड्रॉप-डाउन पर ऑटोफोकस होने पर यह तुरंत खुल सकता है (ब्राउज़र पर निर्भर)