पल इनपुट बॉक्स को कैसे फोकस करना है?

मैं इनपुट श्रोता संरचना का उपयोग कर रहा हूं जैसे कुछ इनपुट करने के लिए इनपुट बॉक्स फोकस खो देता है। लेकिन यह काम नहीं करेगा। पल इनपुट बॉक्स प्राप्त करने के लिए मुझे किस घटना को सुनना चाहिए, इसके अंदर कर्सर खो देता है (उपयोगकर्ता इसके बाहर क्लिक करता है)?पल इनपुट बॉक्स को कैसे फोकस करना है?

document.getElementById('div inside which input is located').addEventListener('blur', function(e){ if(event.target.className=='editInput'){doStuff(event.target);} } , false);

स्रोत

2012-12-02 lwiii

अपने कोड में आप इनपुट को शामिल करने वाले div को ईवेंट संलग्न करने का प्रयास कर रहे थे। क्या आप div के अंदर प्रत्येक इनपुट पर इवेंट हैंडलर संलग्न करना चाहते थे? यदि ऐसा है, तो कृपया मेरे उत्तर पर एक नज़र डालें। –

सही घटना ऑन ब्लर पर है। इस कोड को देखो:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>element</title> 
<script type="text/javascript"> 
    function message() { 
      var text = document.getElementById("test").value; 
      alert(text); 
    } 
</script> 
    </head> 
    <body> 
     <input type="text" name="test" id="test"> 
<script type="text/javascript"> 
document.getElementById("test").onblur=message; 
</script> 
    </body> 
</html>

यह काम करता है और जब यह ध्यान केंद्रित खो देता है इनपुट की सामग्री के मुद्रण करता है। हो सकता है कि आपकी त्रुटि यह है कि आपने ईवेंट को div से जोड़ा है, इनपुट में नहीं?

स्रोत

2012-12-02 10:52:25 user4035

किसी अन्य तरीके से ईवेंट को जोड़ने का प्रयास करेगा। धन्यवाद! – lwiii

onblur बजाय blur की कोशिश करो।

blur एक ऐसी विधि है जो किसी ऑब्जेक्ट को फोकस खोने का कारण बनती है, जबकि onblur एक ऐसी घटना होती है जब ऑब्जेक्ट फोकस खो देता है।

स्रोत

2012-12-02 10:42:36 ose

var input = document.getElementsByTagName('input')[0]; 

input.onfocus = function() { 
    this.className = 'highlight'; 
} 

input.onblur = function() { 
    this.className = ''; 
}

स्रोत

2012-12-02 10:44:19 Meliborn

getElementsByTagName() प्रदर्शन के साथ तत्वों की गणना करता है: कोई नहीं; ? – lwiii

@lwiii हां, ज़ाहिर है! स्टाइल प्रॉपर्टी सेट करना दस्तावेज़ के डीओएम पेड़ से तत्व को नहीं हटाता है (भले ही यह प्रदर्शित हो: कोई भी नहीं) :-) –

वेनिला जावास्क्रिप्ट का उपयोग कर कलंक घटना के लिए कोई हैंडलर की स्थापना: इस तरह के रूप में इस

document.getElementById("test").onblur= yourEventHandler

कोड का उपयोग कर

आप विशिष्ट तत्व "परीक्षण" के लिए कलंक घटना के हैंडलर सेट कर सकते हैं वेनिला jQuery में आप किसी भी संशोधन के बिना अपने प्रश्न में ईवेंट हैंडलर का उपयोग कर सकते हैं। वह हिस्सा शामिल है। हालांकि, मुझे विश्वास है कि यहां और कहा जा सकता है।

बड़ी तस्वीर:

कलंक/पाठ आदानों पर ध्यान केंद्रित करने की घटनाओं में कम से कम परेशानी घटनाओं ब्राउज़रों में संगतता के संदर्भ में साथ काम करने के शामिल हैं। लेकिन यदि आप कोई गंभीर विकास करने जा रहे हैं तो मैं jQuery, YUI, Dojo, MooTools आदि जैसे ढांचे का उपयोग करने की सलाह देता हूं। ये दोनों आपको अच्छे कोड लिखने में मदद करेंगे और आपको संगतता समस्याओं से बचाएंगे।

दुर्भाग्यवश, वास्तविकता वाले वेब डेवलपर्स का सामना करना पड़ता है, समान ब्राउज़र वाले समान ब्राउज़र, लेकिन समान व्यवहार नहीं हैं। एक समाधान खोजने के लिए पर्याप्त नहीं है कि एक ब्राउज़र पर काम करने के लिए होता है जब हम उस कोड के टुकड़े का परीक्षण करते हैं जिसे हमने अभी लिखा है। हमें यह सुनिश्चित करने की ज़रूरत है कि हमारा कोड उन सभी ब्राउज़रों में सही ढंग से काम करता है जो हमारे एप्लिकेशन को लक्षित कर रहे हैं। तो क्या होता है यदि आपको अचानक पता चलता है कि धुंध को आवंटित करने का आपका तरीका कुछ विशिष्ट तत्वों के लिए कुछ ब्राउज़र पर काम नहीं करता है लेकिन दूसरा कोई करता है? क्या आप अपने कोड में हर जगह जाते हैं और अगर वहां है तो? क्या आप वाकई इस मार्ग पर जाने के लिए कुछ भी याद नहीं कर चुके हैं? और फिर, यदि आपको किसी अन्य ब्राउज़र के साथ कोई और समस्या मिलती है तो क्या आप 'और इतने आगे और आगे' जोड़ते हैं? हो सकता है कि आप एक फ़ंक्शन setBlurEventHandler को परिभाषित करने का निर्णय लेते हैं जो बॉक्स पर जो कहता है वह करता है और उपरोक्त विवरणों के बजाए इसे अपने कोड में हर जगह उपयोग करता है। क्या आप केवल धुंधला घटना के लिए या आपके द्वारा किए गए सब कुछ के लिए करते हैं? यह अन्य चीजों के लिए भी करना समझ में आता है। महान। अब आपके पास ब्राउज़िंग कोड के लिए एक ढांचा है जो ब्राउज़र में संगत है। अगर हम सभी ने अपने ढांचे को अपने आप में रखा है तो हम एक ही समस्या को फिर से खोजने और ठीक करने में काफी समय व्यतीत करेंगे। ओपन-सोर्स जावास्क्रिप्ट फ्रेमवर्क दर्ज करें। आप उन्हें उन लोगों में कठोर श्रम के घंटों का लाभ उठाने का उपयोग कर सकते हैं, लेकिन आप बग की रिपोर्टिंग, कोड और दस्तावेज लिखकर भी योगदान दे सकते हैं। क्या इससे ज्यादा समझ नहीं आती है?(या यदि भविष्य में किसी बिंदु पर आप सुनिश्चित हैं कि आपके पास कुछ बहुत चालाक विचारों के आधार पर एक ढांचा है, हालांकि अधूरा है, हर तरह से इसे बाहर रखें और देखें कि आप समुदाय को क्या पेशकश कर सकते हैं और समुदाय क्या कर सकता है आप ...)

इस बिंदु को बेहतर तरीके से चलाने के लिए, मुझे आपको jQuery के स्रोत से कुछ टिप्पणियां दिखाने दें। जैसा कि मैंने पहले कहा था, पाठ इनपुट पर धुंध/फोकस घटनाएं ब्राउज़रों में संगतता के मामले में काम करने के लिए कम से कम परेशानीपूर्ण घटनाओं में से हैं। लेकिन आप कितने आश्वस्त हैं कि आप जानते हैं (या याद रखें!) आपके ब्राउज़र को इस तरह के इनलाइन कोड प्रलेखन के साथ सबसे बुनियादी और कम से कम परेशानी वाली घटनाओं के संचालन के साथ निपटने के लिए कितने ब्राउज़र विशिष्टताओं का सामना करना पड़ता है?

// IE<9 dies on focus/blur to hidden element (#1486) 

// IE doesn't fire change on a check/radio until blur; trigger it on click 

// This still fires onchange a second time for check/radio after blur.

मैं ऊपर उल्लिखित कारणों के लिए सीधे डोम के साथ काम करने के खिलाफ recomment।

एक बेहतर दृष्टिकोण jQuery का उपयोग कर:

मान लीजिए आप तीन input तत्वों जिनमें से केवल एक शुरू में editInput वर्ग था के साथ एक divformDiv कहा जाता था।

<div id=formDiv>  
    <input type="text" name="test1" id="test1" /> 
    <input type="text" name="test2" id="test2" class='editInput' />  
    <input type="text" name="test3" id="test3" />   
</div>

jQuery का उपयोग करना, आप बस की तरह कुछ कर सकता है (मैं अपने कोड से ईवेंट हैंडलर की वास्तविक तर्क की नकल की):

("#formDiv input").blur(function(){ 
     if(this.className=='editInput'){ 
      doStuff(this.target); 
     } 
});

जो मेरा मानना है कि आप क्या करना चाहते थे के करीब है, यहां अन्य समाधानों की तुलना में। (अपने कोड में आप आदानों युक्त div करने के लिए घटना संलग्न करने के लिए कोशिश कर रहे थे मैं अपने इरादों का गलत मतलब निकाला हो सकता है लेकिन मुझे लगा कि यह तुम क्या चाहते थे।।)

आप इस jsFiddle के साथ इस समाधान की कोशिश कर सकते हैं: http://jsfiddle.net/r7tuT/3/

कुछ विदाई विचार:

लोग है जो आपको बताएगा कि इस या उस ढांचे बेहतर है कर रहे हैं और वे सही हो सकता है। मैं केवल टिप्पणी करूंगा कि jQuery सबसे लोकप्रिय है और यह बहुत सभ्य है। पसंद तुम्हारा है, लेकिन जैसा कि मैंने कहा था कि मेरा मानना है कि आपको जल्द से जल्द इन ढांचे में से किसी एक का उपयोग शुरू करना चाहिए क्योंकि यह आपके काम की गुणवत्ता में सुधार करेगा, आपको कुछ चीजों को आंखों के झपकी में करने दें और आप जिस तरह से समस्याओं का सामना करेंगे । जब एक ढांचा या प्रोग्रामिंग भाषा आपके लिए यह करती है, तो आपके जीवन में एक कोडर के रूप में एक शानदार क्षण है :-)

स्रोत

2012-12-02 11:39:00

पल इनपुट बॉक्स को कैसे फोकस करना है?

उत्तर

संबंधित मुद्दे