2010-04-28 16 views
6

'How do you automatically set the focus to a textbox when a web page loads?' के प्रश्न का उत्तर के रूप में, Espoशरीर तत्व पर जावास्क्रिप्ट हैंडलर का उपयोग क्यों नहीं करें?

<body onLoad="document.getElementById('<id>').focus();"> 

Ben Scheirmanreplies उपयोग करने का सुझाव (अधिक विवरण के बिना):

किसी भी जावास्क्रिप्ट किताब आप नहीं बता शरीर तत्व पर संचालकों डाल करने के लिए होगा जैसे

यह क्यों विचार किया जाएगा एड बुरा अभ्यास? एस्पोज़ उत्तर में, 'ओवरराइड' समस्या का चित्रण किया गया है। क्या यह एकमात्र कारण है, या क्या कोई अन्य समस्या है? सुसंगति के मुद्दे?

उत्तर

7

onLoad का उपयोग करना कम और कम आम हो रहा है क्योंकि इस विधि का उपयोग करके कॉलबैक को ढेर नहीं किया जा सकता है, यानी नई onload परिभाषाएं पुराने लोगों को ओवरराइड करती हैं।

jQuery और उसके .load() जैसे आधुनिक ढांचे में, कॉलबैक को ढेर किया जा सकता है और उसी पृष्ठ पर विभिन्न स्क्रिप्ट, प्लगइन्स इत्यादि का उपयोग करते समय कोई संघर्ष नहीं होता है।

इसके अलावा, मार्कअप को कोड से अलग रखने के लिए इसे अच्छी तरह से माना जाता है, इसलिए यदि कोई onload का उपयोग करना चाहेगा (जो पूरी तरह से ठीक है अगर आप पूरे पर्यावरण को नियंत्रित करते हैं और जानते हैं कि आप क्या कर रहे हैं) एक पटकथा की ओर या तो head या एक अलग javaScript फ़ाइल में है कि घटना देते हैं: अगर आप मुझसे पूछें

window.onload = function() { document.getElementById...... } 
+0

@Pekka दस्तावेज़.body.onload कैसे काम कर सकता है अगर शरीर अभी तक लोड नहीं हुआ है? – systempuntoout

+0

@ सिस्टम यह सुनिश्चित नहीं है कि आपका क्या मतलब है? –

+0

@ पेक्का मेरा मतलब है, अगर आप दस्तावेज़ डालते हैं। किसी भी शीर्षलेख में लोड करें यदि यह अभी तक लोड नहीं हुआ है तो यह कैसे काम कर सकता है? – systempuntoout

0

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

0

खैर, '<id>' एक अमान्य id मूल्य है। मैं इस तरह के किसी भी चरित्र का उपयोग नहीं करता।

और अच्छी प्रैक्टिस के लिए, विंडो का उपयोग करना बेहतर है। आईएमओ को लोड करें और इसे <head> टैग में रखें। या बेहतर अभी तक, आप इसे .js फ़ाइल में ले जा सकते हैं और इसे गति के लिए कैश कर सकते हैं।

0

अधिक गैर-जावास्क्रिप्ट से संबंधित उत्तर के रूप में, आपके आवेदन की प्रस्तुति परत टेम्पलेट्स या यहां तक ​​कि नेस्टेड टेम्पलेट्स (सपनेवेवर या मास्टर पेज इत्यादि) के रूप में हो सकती है जहां शरीर टैग में विशिष्ट कोड की आवश्यकता नहीं हो सकती है या टेम्पलेट "विरासत" होने पर अन्य कोड के साथ संघर्ष

0

मैं बाद में ओवरराइड के मुकाबले कोई अन्य कारण नहीं देख सकता, जिससे आपके कोड को कभी भी निष्पादित नहीं किया जा सकेगा। इसके अलावा, घुसपैठ जावास्क्रिप्ट अब बहुत अधिक सम्मान में नहीं है।

आपको घटना को सुनने के लिए एक फ़ंक्शन असाइन करना चाहिए। आप इसे इस तरह कर सकते हैं:

function onloadFocus() { 
    document.getElementById('<id>').focus(); 
} 

if (window.addEventListener) {  
    window.addEventListener('load', function(e) {onloadFocus();}, false);} 
else if (window.attachEvent) { 
    window.attachEvent('onload', function(e) {onloadFocus();}); 
} 

... या इस तरह के jQuery के रूप में एक जावास्क्रिप्ट ढांचे, यह है कि आप के लिए एक ही कार्यक्षमता प्रदान करेगा पर भरोसा करते हैं।

4

वहाँ प्रदान की, <body> तत्व में onload विशेषता का उपयोग कर के साथ कुछ भी गलत नहीं:

  • आप पेज
  • कोई अन्य स्क्रिप्ट कि आप वर्तमान पृष्ठ पर उपयोग करें या में हो सकता था की पूरा नियंत्रण है भविष्य में शरीर के तत्व पर onload हैंडलर या window ऑब्जेक्ट
  • आप अपने दिमाग को जानते हैं और आपके मार्क-अप में स्क्रिप्ट का एक छोटा टुकड़ा खुश हैं।

हालांकि यह सभी प्रमुख ब्राउज़रों में कार्यान्वित किया जाता वापस कई वर्षों के लिए जा रहा है, जबकि window.onload, नहीं है यह भी (एचटीएमएल 4) यह देखते हुए कि <body onload="..."> एक औपचारिक मानक का एक हिस्सा है लायक है।

+1

वास्तव में पारंपरिक रूप से * विंडो 'ऑब्जेक्ट के बारे में * कुछ नहीं * औपचारिक रूप से मानकीकृत किया गया था। यह अब तय किया जा रहा है: एचटीएमएल 5 [मानकीकरण] (http://dev.w3.org/html5/spec/Overview.html#the-window-object) ब्राउज़र ऑब्जेक्ट मॉडल का यह हिस्सा, 'ऑनलोड' सहित। – bobince

3

इनलाइन ईवेंट हैंडलर विशेषताओं को एक पल के लिए गलतता के मुद्दों के बारे में बताते हुए, onload ईवेंट ऑटोफोक्यूसर डालने के लिए एक खराब जगह है, क्योंकि यह केवल तभी होता है जब पूरे पृष्ठ को लोड किया जाता है, जिसमें छवियां शामिल हैं।

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

ऑटोफोकस एक संभावित रूप से शत्रुतापूर्ण विशेषता है जिसका उपयोग कम और विनम्रता से किया जाना चाहिए। इसका एक हिस्सा फोकस करने से पहले देरी को कम कर रहा है, और ऐसा करने का सबसे आसान तरीका तत्व के बाद सीधे एक स्क्रिप्ट ब्लॉक है।

<input id="x"> 
<script type="text/javascript"> 
    document.getElementById('x').focus(); 
</script> 
+0

बहुत अच्छा है कि आप इस तथ्य का जिक्र करते हैं। यह एक फीचर अनुरोध है जो मुझे कई उपयोगकर्ताओं से मिला है। मुझे नहीं पता कि इसका कम अनुभव स्तर के साथ क्या करना है, और स्पष्ट रूप से मुझे जेएस चाल के किसी भी अच्छे विकल्प के बारे में पता नहीं है। यह बहुत अच्छा होगा यदि ब्राउज़र के पास सबसे कम टैबिंडेक्स वाले तत्व पर ध्यान देने का विकल्प होगा, जो अधिक अनुभवी उपयोगकर्ता ऑप्ट आउट कर सकते हैं। मुझे व्यक्तिगत रूप से यह बहुत परेशान लगता है, लेकिन मुझे नहीं पता कि एक अच्छा मध्यम तरीका कैसे ढूंढें। –

+0

हो सकता है कि कोई भी 'ध्यान केंद्रित करें' को लागू कर सके, क्योंकि ऐसा लगता है कि मेरे उपयोगकर्ता क्या चाहते हैं :) –

+0

+1।पूरी तरह से सहमत हैं, और मैंने इस बिंदु को बनाने पर विचार किया लेकिन 'अधिभार' मुद्दे के बारे में लिखने के बाद उत्साह से बाहर हो गया। –

0

एक और तरीका है इस पर गौर करने के लिए एक addEventListener कोशिश उपयोग कर रहा है बजाय एक एचटीएमएल कोड के रूप में उपयोग के जे एस:

<body onLoad="document.getElementById('<id>').focus();"> 

    <body> 

    <script> 

    document.body.addEventListener('load', funcLoad); 

    function funcLoad(){ 

    document.getElementById('<id>').focus(); 

    } 

    </script> 
</body> 

इसे आज़माएं, यह अन्य समाधान की तुलना में बेहतर काम कर सकते हैं।