ऑनफोकस को किसी इनपुट टैग पर ऑटोफोकस विशेषता का उपयोग करते समय नहीं कहा जाता है

Question

निम्न उदाहरण में, मुझे केवल एक अलर्ट बॉक्स मिलता है। मैंने पढ़ा है कि जावास्क्रिप्ट कोड निष्पादित होने से पहले फोकस रखा जाता है। क्या यह काम करने के लिए कोई रास्ता है?

<input id="i" type="text" autofocus onfocus="alert(1)"> 

<script type="text/javascript"> 
document.getElementById('i').addEventListener('focus', function() { 
    alert(2); 
}, false); 
</script> 

(मैं केवल सफारी में यह परीक्षण किया है)

संपादित करें: मैं स्पष्ट रूप से यह इस तरह से (Prototypejs चयनकर्ता) कर सकते हैं:

var autofocusElement = $$('input[autofocus]')[0]; 
callListener(autofocusElement); 

लेकिन यह केवल जोड़ने की तुलना में बदसूरत लग रहा है एक घटना श्रोता।

संपादित करें:

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

http://jsfiddle.net/tellnes/7TMBJ/3/

यह फ़ायरफ़ॉक्स के बाद से Firefox 3.6 में ठीक काम करता है ऑटोफोकस समर्थन नहीं करता। लेकिन सफारी में, जो ऑटोफोकस का समर्थन करता है, वह घटना नहीं है।

Answer 1

HTML5 working draft से:

वहाँ autofocus विशेषता निर्दिष्ट के साथ दस्तावेज़ में एक से अधिक तत्व नहीं होना चाहिए।

तो आप वैसे भी अपरिभाषित व्यवहार के लिए पूछ रहे हैं।

फ़ायरफ़ॉक्स 3.6 के तहत केवल एक autofocus तत्व के साथ, किसी भी हैंडलर को पृष्ठ लोड पर कॉल नहीं किया जाता है। मैन्युअल रूप से तत्व को फोकस देने से दोनों हैंडलर कॉल होते हैं (फिर एक अनंत लूप में आगे बढ़ते हैं, अलर्ट बॉक्स के कारण बंद होने पर तत्व पर ध्यान केंद्रित करते हैं)।

एचटीएमएल 5 मसौदा कहता है कि autofocusfocus घटना को ऊपर उठाने सहित पृष्ठ लोड पर focusing steps प्रदर्शन करना चाहिए, है, लेकिन संभावना है कि ब्राउज़र वर्तमान में एक पूर्ण या सुसंगत तरीके से कि सुविधा को लागू करने नहीं कर रहे हैं कर रहे हैं।

आप एचटीएमएल 5 spec समाप्त होने तक पेज 0 लोड के दौरान अपने focus इवेंट हैंडलर को स्पष्ट रूप से कॉल करना चाहते हैं और ब्राउज़र पूर्ण समर्थन के लिए लक्ष्य करना शुरू कर सकते हैं।

Answer 2

आप या तो input के लिए, जावास्क्रिप्ट कोड का एक टुकड़ा पर अमल करने onfocus की जरूरत है, तो आप jQuery इस्तेमाल कर सकते हैं: http://api.jquery.com/focus/

Answer 3

अपने वर्तमान उदाहरण से निम्नलिखित कोड:

<input id="i" type="text" autofocus onfocus="alert(1)"> 

<script type="text/javascript"> 
    document.getElementById('i').addEventListener('focus', function() { 
     alert(2); 
    }, false); 
</script> 

एक पैदा करने के लिए जा रहा है 2

[eidt]

करने के लिए 1 से जा अलर्ट की अनंत लूप

है क्योंकि:

इनपुट ऑटोफोकस हो जाता है (यह केवल broswers कि समर्थन autofocus में होता है), घटना है जो एक चेतावनी आग आग, चेतावनी फोकस लेता है, ठीक क्लिक करें, इनपुट फोकस लेता है, ध्यान केंद्रित घटना अब दो अलग अलग अलर्ट ट्रिगर नया ईवेंट सक्रिय (डीओएम पूरी तरह से लोड हो गया है इसलिए एक नया अलर्ट एक और चेतावनी के साथ जोड़ा गया है), दोनों अलर्ट फोकस लेते हैं, ठीक क्लिक करें, इनपुट grabs फोकस नई घटना को दो अलग-अलग अलर्ट ट्रिगर करते हुए आग लगती है, चेतावनी पकड़ने पर ध्यान दें, ठीक क्लिक करें, अगली चेतावनी फोकस करें, ठीक क्लिक करें, इनपुट grabs फोकस, दोनों घटनाओं को आग, चेतावनी पकड़ने के लिए चेतावनी, ठीक क्लिक करें, अगली चेतावनी फोकस पकड़ता है, ठीक क्लिक करें, इनपुट grabs फोकस, दोनों घटनाओं को आग लगाना, चेतावनी पकड़ने के लिए चेतावनी, ठीक क्लिक करें, अगली चेतावनी फोकस पकड़ो, ठीक क्लिक करें, इनपुट फोकस पकड़ता है, दोनों घटनाओं को आग लगता है, ध्यान केंद्रित करने के लिए चेतावनी देता है, ठीक क्लिक करें, अगली चेतावनी फोकस पकड़ती है, ठीक क्लिक करें, इनपुट grabs फोकस, दोनों घटनाओं, इनपुट gra बीएस फोकस, दोनों घटनाओं को फायर करता है, फोकस फोकस करता है, ठीक क्लिक करता है, अगली चेतावनी फोकस करती है, ठीक क्लिक करें, इनपुट पकड़ लेता है, दोनों घटनाओं को आग लगती है, इनपुट पकड़ लेती है, दोनों घटनाओं को आग लगती है, फोकस फोकस करती है, ठीक क्लिक करें, अगली चेतावनी फोकस करती है, ठीक क्लिक करें, इनपुट grabs फोकस, दोनों घटनाओं को आग, इनपुट पकड़ फोकस, दोनों घटनाओं को आग लगती है, चेतावनी पकड़ने के लिए चेतावनी, ठीक क्लिक करें, अगली चेतावनी फोकस फोकस, ठीक क्लिक करें, इनपुट grabs फोकस, दोनों घटनाओं को आग ...

पाठ विवरण एक अनंत प्रक्रिया एफटीडब्ल्यू! ....? : पी

[/ संपादित करें]

दो ऑटो केंद्रित के साथ अपने पिछले उदाहरण में लागू किया ऐसा लगता है कि पिछले एक उदाहरण मैं तल पर संलग्न किया है के रूप में क्रियान्वित की जाएगी। मैंने वर्ग नाम के आधार पर प्रत्येक इनपुट में एक फोकस ईवेंट जोड़ने का एक तरीका भी जोड़ा ... सुनिश्चित नहीं है कि आप इसकी तलाश कर रहे हैं लेकिन हालांकि यह कुछ मदद की जा सकती है।

JSFiddle Example of onfocus event

Answer 4

आप ऑटोफोकस के लिए एक मूल्य देने के लिए की जरूरत है।
<input id="i" type="text" onfocus="alert(1)" autofocus="">