जावास्क्रिप्ट ने HTML फॉर्म एलिमेंट पर फोकस किया

331

मेरे पास इसमें एक टेक्स्ट बॉक्स के साथ एक वेब फॉर्म है। मैं डिफ़ॉल्ट रूप से टेक्स्ट बॉक्स पर फ़ोकस सेट करने के बारे में कैसे जाऊँ?

कुछ इस तरह:

<body onload='setFocusToTextBox()'>

तो क्या कोई इसके साथ मेरी मदद कर सकता है? मुझे नहीं पता कि जावास्क्रिप्ट के साथ पाठ बॉक्स पर कैसे ध्यान केंद्रित किया जाए।

<script>
function setFocusToTextBox(){
//What to do here
}
</script>

— tenstar
स्रोत

21

जितना सरल document.getElementById('your_text_box_id').focus();।

— तेमू

575

यह करो।

अगर आपका तत्व कुछ इस तरह है ।।

<input type="text" id="mytext"/>

आपकी स्क्रिप्ट होगी

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>

— mohkhan
स्रोत

3

आपको वेब API (उदाहरण के लिए Document.forms, Document.getelementsByTagNameया Node.childNodes) के अन्य भागों का उपयोग करके दस्तावेज़ को स्कैन करना होगा और या तो एक ज्ञात दस्तावेज़ संरचना पर भरोसा करना होगा या कुछ तत्व विशिष्ट गुणों की तलाश करनी होगी ।

— पीटर

40

या स्पष्ट उत्तर ... इसे एक आईडी दें;)

— प्रासंगिक

4

मैं एक आईडी का उपयोग करने के खिलाफ सलाह दूंगा क्योंकि यह निर्दिष्ट है। इसके बजाय नाम या यहां तक कि एक वर्ग का उपयोग करें। उस स्थिति में आप इनपुट तत्व का संदर्भ प्राप्त करने के लिए document.querySelector ("[name = 'myText']") या document.querySelector ("myText") का उपयोग करेंगे।

— क्रिस लव

12

@ क्रिसलव दिलचस्प सलाह। एक आईडी को "ओवर निर्दिष्ट" क्यों किया गया है और क्या, वास्तव में, इसके साथ समस्या है? यह सरल है, अधिक सटीक है और इसे खोजने के लिए कोड, आईडी के साथ थोड़ा तेज होगा। यह मेरे लिए सबसे स्पष्ट और समझदार चीज की तरह लगता है - अगर यह संभव है।

— पांडवूड

4

@ChrisLove यह एक सीएसएस चयनकर्ता को निर्दिष्ट नहीं कर रहा है, यह एक HTML आईडी विशेषता सेट कर रहा है - विशिष्टता एक समस्या है जिस तरह से सीएसएस प्रसंस्करण डोमेन चयनकर्ताओं को पार्स करता है, यह नहीं कि एचटीएमएल में आईडी और क्लास विशेषताएँ कैसे काम करती हैं। यह सीएसएस संलग्न करने के लिए उसी डोम चयनकर्ताओं का उपयोग करना उचित नहीं है क्योंकि यह जेएस को संलग्न करने के लिए है, जिसका अर्थ है कि आप अपने द्वारा बताए गए भेदभाव को बनाए रख सकते हैं

— टोनी लेईग

142

इसके लायक क्या है, आप autofocusHTML5 संगत ब्राउज़रों पर विशेषता का उपयोग कर सकते हैं । IE पर भी संस्करण 10 के रूप में काम करता है।

<input name="myinput" value="whatever" autofocus />

— एक बेहतर जैतून
स्रोत

51

ध्यान रखें, यह केवल फ़ोकस सेट करने के लिए काम करता है जब पृष्ठ पहले लोड होता है; इनपुट के जवाब में बाद में फोकस सेट करने के लिए इसका उपयोग नहीं किया जा सकता है।

— मार्टिन कार्नी

मैं डर ऑटोफोकस विशेषता संगत नहीं है, तो आईओएस सफारी ( caniuse.com/#search=autofocus ), जबकि .focus () सिर्फ ओपेरा मिनी (के साथ असंगत है caniuse.com/#search=focus )

— lfrodrigues

3

ध्यान दें कि यदि आप कंसोल से ध्यान केंद्रित करने की कोशिश कर रहे हैं तो यह संभव नहीं है!

— या चोबन

65

आमतौर पर जब हम एक टेक्स्टबॉक्स पर ध्यान केंद्रित करते हैं, तो हमें भी स्क्रॉल करना चाहिए

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}

जाँच करें कि क्या यह मदद करता है।

— ख़ान को
स्रोत

2

यह एक छोटी स्क्रीन पर एक वास्तविक सिरदर्द हो सकता है यदि फ़ील्ड ऑफ स्क्रीन है :-)

— Toni Leigh

यदि आपके पास एक हेडर बार है जो ठीक किया गया है, तो आपको textbox.scrollIntoView (गलत) का उपयोग करने की आवश्यकता हो सकती है, यह बस तत्व को शीर्ष के बजाय नीचे सेट करता है।

— डेडलीचैम्बर्स २ '

30

यदि आपका कोड है:

<input type="text" id="mytext"/>

और अगर आप JQuery का उपयोग कर रहे हैं, तो आप इसका भी उपयोग कर सकते हैं:

<script>
function setFocusToTextBox(){
    $("#mytext").focus();
}
</script>

ध्यान रखें कि आपको पहले इनपुट आकर्षित करना होगा $(document).ready()

— रिचर्ड रेबेको
स्रोत

11

मैंने इसे अस्वीकृत कर दिया, क्योंकि आधार प्रश्न में jQuery का कोई निहितार्थ दूर नहीं है। ओपी विशुद्ध रूप से जावास्क्रिप्ट रहना चाहता था

— फॉलनर्रेपर

11

ठीक है, आपके पास कारण है, मैं गलत हो गया, लेकिन मुझे लगता है कि यह वैसे भी मददगार है।

— रिचर्ड रेबेको

4

मैं इसे आगे बढ़ा रहा हूं क्योंकि उन परियोजनाओं में जहां jQuery पहले से ही उपयोग किया जाता है और आप तत्वों को jQuery चयन ऑब्जेक्ट के रूप में उपयोग करते हैं, वेनिला JS का उपयोग करने के बजाय सुसंगत होना बेहतर है ।

— पैराडाइट

8

स्टैकओवरफ्लो egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrectके सहायता केंद्र के अनुसार, @ फाल्नरपर डाउनवोट्स हैं । मुझे यह उन श्रेणियों के पास कहीं नहीं मिलता है। मदद करना ओपी तक सीमित नहीं है, है ना?

— गेली एन

@GellieAnn जबकि यह एक जवाब है, यह ओपीएस प्रश्न के दायरे से बाहर है। एक कारण है कि वह वेनिला जावास्क्रिप्ट का उपयोग कर रहा है, और जब आप अन्य रूपरेखाओं का उल्लेख कर सकते हैं और एक को जन्म देने के लिए संकेत या संकेत दे सकते हैं और एक तर्क दे सकते हैं, तो आपको अभी भी पूछे गए प्रश्न की सीमा के भीतर से उत्तर को हल करना चाहिए। इसलिए, मैं अपने पतन से खड़ा हूं।

— फॉलनरेपर

20

सादे जावास्क्रिप्ट के लिए, निम्नलिखित प्रयास करें:

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};

— sipp
स्रोत

3

मैं सिर्फ इस का उपयोग करने के लिए इस्तेमाल किया:

<html>
  <head>
    <script type="text/javascript">
      function focusFieldOne() {
        document.FormName.FieldName.focus();
      }
    </script>
  </head>

  <body onLoad="focusFieldOne();">
    <form name="FormName">
      Field <input type="text" name="FieldName">
    </form>
  </body>
</html>

उस ने कहा, आप बस HTML 5 में ऑटोफोकस विशेषता का उपयोग कर सकते हैं।

कृपया ध्यान दें: मैं इस पुराने धागे को अपडेट करना चाहता था, उदाहरण के साथ-साथ इसे पढ़ने वाले लोगों के लिए नए, आसान अपडेट को भी दर्शाता है। ;)

— RajnishCoder
स्रोत

1

जैसा कि पहले उल्लेख किया गया है, document.forms भी काम करता है।

function setFocusToTextBox( _element ) {
  document.forms[ 'myFormName' ].elements[ _element ].focus();
}

setFocusToTextBox( 0 );
// sets focus on first element of the form

— मैक
स्रोत

AFAIK फॉर्म में "नाम" विशेषता नहीं है

— Marecky

प्रपत्रों में लंबे समय से "नाम" हैं, और HTML5 में, वे अभी भी करते हैं। देखें w3.org/TR/html5/forms.html#the-form-element

— मैक

1

यदि आपकी <input>या आपके <textarea>पास विशेषता है id=mytextतो उपयोग करें

mytext.focus();

कोड स्निपेट दिखाएं

function setFocusToTextBox() {
    mytext.focus();
}

<body onload='setFocusToTextBox()'>
  <form>
    <input type="text" id="mytext"/>
  </form>
</body>

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

— कामिल कियॉलेजवस्की
स्रोत

0

window.onload पर ध्यान केंद्रित करने के लिए शुरू में onblur है, जब आप textarea के बाहर क्लिक करते समय फोकस डालते हैं, या संदेश क्षेत्र ब्लर से बचते हैं

    <textarea id="focus"></textarea>
    <script>
     var mytexarea=document.getElementById("focus");
    window.onload=function()
    {

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>

— ßãlãjî
स्रोत