पृष्ठ लोड पर HTML इनपुट बॉक्स पर ध्यान केंद्रित करना

95

जब पृष्ठ लोड होता है (उदाहरण: google), तो मैं इनपुट बॉक्स पर डिफ़ॉल्ट फोकस सेट करने का प्रयास कर रहा हूं। मेरा पृष्ठ बहुत सरल है, फिर भी मैं यह पता नहीं लगा सकता कि यह कैसे करना है।

यह वही है जो मैंने अब तक प्राप्त किया है:

<html>
<head>
 <title>Password Protected Page</title>

 <script type="text/javascript">
 function FocusOnInput()
 {
 document.getElementById("PasswordInput").focus();
 }
 </script>

 <style type="text/css" media="screen">
  body, html {height: 100%; padding: 0px; margin: 0px;}
  #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
  #middle {vertical-align: middle}
  #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
 </style>
</head>
<body onload="FocusOnInput()">
 <table id="outer" cellpadding="0" cellspacing="0">
  <tr><td id="middle">
   <div id="centered">
  <form action="verify.php" method="post">
   <input type="password" name="PasswordInput"/>
  </form>
   </div>
  </td></tr>
 </table>
</body>
</html>

यह कैसे काम करता है, जबकि यह ठीक काम नहीं करता है?

<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
     document.getElementById("InputID").focus();
}
</script>
</head>

<body onload="FocusOnInput()">
  <form>
       <input type="text" id="InputID">
  </form>
</body>

</html>

मदद बहुत सराहना की है :-)

— क्रिस
स्रोत

36

यह रेखा:

<input type="password" name="PasswordInput"/>

एक आईडी विशेषता होनी चाहिए , जैसे:

<input type="password" name="PasswordInput" id="PasswordInput"/>

— Saikios
स्रोत

क्या वास्तव में इनपुट फोकस सेट करेगा? आपने इसे किस ब्राउज़र पर आज़माया?

— पीटर मोर्टेंसन

@PeterMortensen जब मैंने 9 साल पहले यह परीक्षण किया था कि वह फ़ायरफ़ॉक्स, क्रोम और यानी :) पर था

— सैकियोस

326

और आप HTML5 के ऑटोफोकस विशेषता का उपयोग कर सकते हैं (IE9 और उसके अलावा सभी मौजूदा ब्राउज़रों में काम करता है)। केवल अपनी स्क्रिप्ट को कॉल करें यदि यह IE9 या उससे पहले का है, या अन्य ब्राउज़र का पुराना संस्करण है।

<input type="text" name="fname" autofocus>

— LinuxLars
स्रोत

7

ie9: stackoverflow.com/questions/8280988/…

— jedierikb

@BesheshGangani autofocusइंटरनेट एक्सप्लोरर 9 और पुराने संस्करणों में समर्थित नहीं है।

— मिशेल आयरिस

4

यहाँ ऑटोफोकस के लिए एक संगतता तालिका है : caniuse.com/#feat=autofocus

— Oreo

5

यह IE के साथ आम मुद्दों में से एक है और इसके लिए तय करना सरल है। इनपुट में .focus () को दो बार जोड़ें।

ठीक कर :-

function FocusOnInput() {
    var element = document.getElementById('txtContactMobileNo');
    element.focus();
    setTimeout(function () { element.focus(); }, 1);
}

और $ (दस्तावेज़) पर FocusOnInput () कॉल करें। पहले से ही (फ़ंक्शन () {.....};

— कुमार कीर्ति
स्रोत

1

आप यह भी उपयोग कर सकते हैं:

<body onload="focusOnInput()">
    <form name="passwordForm" action="verify.php" method="post">
        <input name="passwordInput" type="password" />
    </form>
</body>

और फिर अपने जावास्क्रिप्ट में:

function focusOnInput() {
    document.forms["passwordForm"]["passwordInput"].focus();
}

— डी ब्लूज़
स्रोत