जब वेब पेज लोड होता है तो आप टेक्स्ट बॉक्स पर ध्यान कैसे केंद्रित करते हैं?

164

क्या ऐसा करने के लिए एक HTML टैग है या इसे जावास्क्रिप्ट के माध्यम से किया जाना है?

javascript html

— मार्क bwk
स्रोत

blog.jerodsanto.net/2009/05/jquery-set-mouse-focus-on-page-load

— अर्जुन

245

यदि आप jquery का उपयोग कर रहे हैं:

$(function() {
  $("#Box1").focus();
});

या प्रोटोटाइप:

Event.observe(window, 'load', function() {
  $("Box1").focus();
});

या सादे जावास्क्रिप्ट:

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

यद्यपि यह ध्यान रखें कि यह लोड हैंडलर पर अन्य को प्रतिस्थापित करेगा, इसलिए अपलोड हैंडलर को बदलने के लिए सुरक्षित तरीके से जोड़ने के लिए google में addLoadEvent () देखें।

— बेन शेहरमैन
स्रोत

3

शरीर के तत्व पर हैंडलर क्यों नहीं लगाए जाते? कोई संदर्भ? धन्यवाद

— अलेक्जेंडर टॉर्टलिंग

7

क्योंकि यह HTML से जावास्क्रिप्ट को अलग करने के लिए बहुत क्लीनर है। आपको अपने HTML में विज़ुअल तत्वों के लिए स्क्रिप्टिंग व्यवहार जोड़ना चाहिए।

— बेन शेहेरमन

94

HTML में सभी फॉर्म फ़ील्ड के लिए एक autofocusविशेषता है। HTML 5 में Dive में इस पर एक अच्छा ट्यूटोरियल है । दुर्भाग्य से यह वर्तमान में 10 से कम IE संस्करणों द्वारा समर्थित नहीं है ।

HTML 5 विशेषता का उपयोग करने और एक JS विकल्प पर वापस आने के लिए:

<input id="my-input" autofocus="autofocus" />
<script>
  if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("my-input").focus();
  }
</script>

कोई jQuery, onload या इवेंट हैंडलर की आवश्यकता नहीं है, क्योंकि JS HTML तत्व से नीचे है।

संपादित करें: एक और लाभ यह है कि यह कुछ ब्राउज़रों में जावास्क्रिप्ट के साथ काम करता है और जब आप पुराने ब्राउज़रों का समर्थन नहीं करना चाहते हैं तो आप जावास्क्रिप्ट को हटा सकते हैं।

संपादन 2: फ़ायरफ़ॉक्स 4 अब autofocusविशेषता का समर्थन करता है, बस IE को बिना समर्थन के छोड़ देता है।

— dave1010
स्रोत

3

क्या साथ है autofocus="aufofocus"? आपके द्वारा प्रदान किए गए सभी लिंक केवल विशेषता जोड़ने के लिए कहते हैं autofocus:।

— गेरेट

6

XHTML और HTML4 के दिनों में attribute="value"बूलियन विशेषताओं के लिए ऐसा करना आम था । HTML5 "खाली विशेषता सिंटैक्स" के साथ आया और हमने अतिरेक को छोड़ दिया। अब हम कर सकते हैं<input checked disabled autofocus data-something>

— dave1010

मुझे यह दृष्टिकोण पसंद है ... वह कोड इनपुट से संबंधित है ... इनपुट और बूम से छुटकारा पाएं, संबंधित कोड वहीं है ... हम इन दिनों बहुत खो गए हैं ... पूर्ण सर्कल में जा रहे हैं अब सरल बनाने की कोशिश कर रहे हैं। ..

— सर्ज

16

आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता है:

<BODY onLoad="document.getElementById('myButton').focus();">

@ आप ध्यान दें कि आपको इवेंट हैंडलर को इस तरह नहीं जोड़ना चाहिए। हालांकि यह एक और सवाल है, वह अनुशंसा करता है कि आप इस फ़ंक्शन का उपयोग करें:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

और फिर अपने पेज पर AddLoadEvent को कॉल करें और एक फ़ंक्शन को संदर्भित करें जो आपको वांछित टेक्स्टबॉक्स पर ध्यान केंद्रित करता है।

— Espo
स्रोत

14

बस टेक्स्टफील्ड में ऑटोफोकस लिखिए। यह सरल है और यह इस तरह काम करता है:

 <input name="abc" autofocus></input>

उम्मीद है की यह मदद करेगा।

— अर्जुन
स्रोत

1

यह अच्छा है, लेकिन समस्या यह है कि यदि आपके पास फिसलने की शैली के साथ कदम है, तो उपयोगी एस्प नहीं होगा यदि इनपुट प्रकार चरण 3 या चरण 4 पर पूर्व के लिए है

— कोबे ब्रायन

12

आप इस तरह से jquery का उपयोग करके इसे आसानी से कर सकते हैं:

<script type="text/javascript">

    $(document).ready(function () {
        $("#myTextBoxId").focus();
    });

</script>

इस फ़ंक्शन को कॉल करके $(document).ready()।

इसका अर्थ है कि यह फ़ंक्शन DOM के तैयार होने पर निष्पादित होगा।

READY फ़ंक्शन के बारे में अधिक जानकारी के लिए, यहां देखें: http://api.jquery.com/ready/

— अमीर चतरबहर
स्रोत

11

सादे वेनिला HTML और जावास्क्रिप्ट का उपयोग करना

<input type='text' id='txtMyInputBox' />


<script language='javascript' type='text/javascript'>
function SetFocus()
{
    // safety check, make sure its a post 1999 browser
    if (!document.getElementById)
    {
        return;
    }

    var txtMyInputBoxElement = document.getElementById("txtMyInputBox");

    if (txtMyInputBoxElement != null)
    {
        txtMyInputBoxElement.focus();
    }
}
SetFocus();
</script>

उन लोगों के लिए .net फ्रेमवर्क और asp.net 2.0 या इसके बाद के संस्करण का उपयोग कर, इसके तुच्छ। यदि आप फ्रेमवर्क के पुराने संस्करणों का उपयोग कर रहे हैं, तो आपको ऊपर के समान कुछ जावास्क्रिप्ट लिखना होगा।

अपने ओनलॉड हैंडलर में (आम तौर पर page_load यदि आप दृश्य स्टूडियो के साथ आपूर्ति की गई स्टॉक पेज टेम्पलेट का उपयोग कर रहे हैं) तो आप उपयोग कर सकते हैं:

सी#

protected void PageLoad(object sender, EventArgs e)
{
    Page.SetFocus(txtMyInputBox);
}

VB.NET

Protected Sub PageLoad(sender as Object, e as EventArgs)

    Page.SetFocus(txtMyInputBox)

End Sub

(* नोट I ने अंडरस्कोर वर्ण को फ़ंक्शन नाम से हटा दिया है जो आमतौर पर Page_Load है क्योंकि एक कोड ब्लॉक में यह ठीक से रेंडर करने के लिए है! मैं मार्कअप प्रलेखन में नहीं देख सकता था कि कैसे unescaped रेंडर करने के लिए अंडरस्कोर प्राप्त करना है।)

उम्मीद है की यह मदद करेगा।

— जॉन
स्रोत

7

IMHO, पृष्ठ पर पहले, दृश्यमान, सक्षम पाठ क्षेत्र का चयन करने का 'सबसे साफ' तरीका, jQuery का उपयोग करना और इसके लिए कुछ करना है:

$(document).ready(function() {
  $('input:text[value=""]:visible:enabled:first').focus();
});

उम्मीद है की वो मदद करदे...

धन्यवाद...

— पुनर्जीवित
स्रोत

6

<html>  
<head>  
<script language="javascript" type="text/javascript">  
function SetFocus(InputID)  
{  
   document.getElementById(InputID).focus();  
}  
</script>  
</head>  
<body onload="SetFocus('Box2')">  
<input id="Box1" size="30" /><br/>  
<input id="Box2" size="30" />  
</body>  
</html>

— जोएल कोएहॉर्न
स्रोत

5

एक सामान्य सलाह के रूप में, मैं सलाह दूंगा कि एड्रेस बार से फोकस न चुराएं। ( जेफ ने पहले ही उस बारे में बात की। )

वेब पेज को लोड होने में कुछ समय लग सकता है, जिसका अर्थ है कि उपयोगकर्ता द्वारा pae URL टाइप करने के कुछ समय बाद आपका फोकस बदल सकता है। तब वह अपना दिमाग बदल सकता था और आपके पेज लोड करते समय और उसे टेक्स्ट बॉक्स में डालने के लिए आपका ध्यान चुराते हुए url टाइपिंग पर वापस आ सकता था।

यही एक और एकमात्र कारण है जिसने मुझे Google को अपना प्रारंभ पृष्ठ के रूप में हटा दिया।

बेशक, यदि आप नेटवर्क (स्थानीय नेटवर्क) को नियंत्रित करते हैं या यदि फोकस परिवर्तन एक महत्वपूर्ण प्रयोज्य समस्या को हल करने के लिए है, तो मुझे भूल जाओ कि मैं क्या कर रहा हूं :)

— विन्सेंट रॉबर्ट
स्रोत

मैं कुछ मामलों में आपसे सहमत हूं। हालाँकि, मेरे विशिष्ट मामले में, मैं थोड़ा div पॉप कर रहा हूँ जो केवल एक इनपुट बॉक्स है। उपयोगकर्ता को कुछ दर्ज करना है और तुरंत div को बंद करना है ताकि फोकस करना आसान हो।

— मार्क बेकाक

2

मुझे थोड़ी अलग समस्या थी। मैं चाहता था autofocus, लेकिन, चाहता था कि placeholderपाठ बना रहे, क्रॉस-ब्राउज़र। कुछ ब्राउज़र placeholderफ़ील्ड को फोकस करते ही टेक्स्ट को छिपा देते थे , कुछ इसे रख लेते थे। मुझे या तो क्रॉस-ब्राउज़र रहने वाले प्लेसहोल्डर्स प्राप्त करने थे, जिनके अजीब दुष्प्रभाव हैं, या उपयोग करना बंद कर दें autofocus।

इसलिए मैंने बॉडी टैग के खिलाफ टाइप की गई पहली कुंजी को सुना, और उस कुंजी को लक्ष्य इनपुट फ़ील्ड में रीडायरेक्ट किया। फिर सभी घटना संचालकों को चीजों को साफ रखने के लिए मार दिया जाता है।

var urlInput = $('#Url');

function bodyFirstKey(ev) {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);

    if (ev.target == document.body) {
        urlInput.focus();
        if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
            urlInput.val(ev.key);
            return false;
        }
    }
};
function urlInputFirstFocus() {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);
};

$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);

https://jsfiddle.net/b9chris/qLrrb93w/

— क्रिस मोसचिनी
स्रोत

0

autofocusइनपुट तत्वों पर सेट करना संभव है

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">

— ऑस्कर कास्टेलन
स्रोत

-1

यदि आप ASP.NET का उपयोग कर रहे हैं तो आप उपयोग कर सकते हैं

yourControlName.Focus()

सर्वर पर कोड में, जो पेज में उपयुक्त जावास्क्रिप्ट जोड़ देगा।

अन्य सर्वर-साइड फ्रेमवर्क में एक समान विधि हो सकती है।

— एंड्रयू मॉर्टन
स्रोत

-3

नीचे दिए गए कोड का उपयोग करें। मेरे लिए यह काम कर रहा है

jQuery("[id$='hfSpecialty_ids']").focus()

— श्रीकांत
स्रोत