किसी HTML फ़ील्ड पर फ़ोकस खो जाने पर टेक्स्ट फ़ील्ड पर फिर से फ़ोकस कैसे करें?

Question

एचटीएमएल फॉर्म पर केवल एक टेक्स्ट फ़ील्ड है। उपयोगकर्ता कुछ पाठ इनपुट करते हैं, एंटर दबाते हैं, फॉर्म जमा करते हैं, और फॉर्म को पुनः लोड किया जाता है। मुख्य उपयोग बारकोड पढ़ने है। मैं पाठ फ़ील्ड पर फ़ोकस सेट करने के लिए निम्न कोड का उपयोग करें:

<script language="javascript"> 
    <!-- 
      document.getElementById("#{id}").focus() 
    //--> 
</script> 

यह समय के सबसे अधिक काम करता है (कोई भी नहीं छू लेती है, तो स्क्रीन/माउस/कुंजीपटल)।

हालांकि, जब उपयोगकर्ता ब्राउज़र विंडो (सफेद खाली स्थान) के भीतर फ़ील्ड के बाहर कहीं भी क्लिक करता है, तो कर्सर चला जाता है। एक एकल फ़ील्ड HTML फॉर्म, मैं कर्सर को खोने से कैसे रोक सकता हूं? या, कर्सर खो जाने के बाद क्षेत्र के अंदर कर्सर को फिर से फ़ोकस कैसे करें? धन्यवाद!

Answer 1

डैरिन के जवाब सही है, लेकिन फ़ायरफ़ॉक्स में काम नहीं करता है। आप Firefox में वापस भी फोकस चोरी करने के लिए चाहते हैं, आप घटना के बाद जब तक यह देरी करने के लिए है:

<input onblur="var that= this; setTimeout(function() { that.focus(); }, 0);"> 

या, बेहतर, जावास्क्रिप्ट से सौंपा:

<script type="text/javascript"> 
    var element= document.getElementById('foo'); 
    element.focus(); 
    element.onblur= function() { 
     setTimeout(function() { 
      element.focus(); 
     }, 0); 
    }; 
</script> 

लेकिन, मैं दृढ़ता से सलाह देंगे आप यह नहीं करना चाहते हैं। उस टेक्स्ट बॉक्स से फोकस हटाने के लिए टेक्स्ट बॉक्स के बाहर क्लिक करना पूरी तरह से सामान्य ब्राउज़र व्यवहार है, जो वैध उपयोग का हो सकता है (उदाहरण के लिए, ctrl-f के लिए खोज बिंदु सेट करने के लिए, या ड्रैग-चयन आदि शुरू करें)। इस अपेक्षित व्यवहार से गड़बड़ करने का एक अच्छा कारण होने की संभावना बहुत कम है।

Answer 2

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

जब मार्कअप को प्रभावित किए बिना यह कर, यह सबसे आसान अगर आप Prototype, jQuery, Closure, आदि की तरह एक पुस्तकालय का उपयोग करें, लेकिन आप उन्हें (बेशक) के बिना यह कर सकते हैं, तो आप सिर्फ ब्राउज़र मतभेद खुद को संभालने के लिए है । उदाहरण के लिए, प्रोटोटाइप का उपयोग कर:

document.observe("dom:loaded", function() { 
    var elm = $('thingy'); 

    elm.focus(); 
    elm.observe('blur', function() { 
     refocus.defer(elm); 
    }); 

    function refocus(elm) { 
     elm.focus(); 
    } 
}); 

आप मार्कअप को प्रभावित करने से परहेज नहीं करते हैं, तो आप onblur विशेषता का उपयोग कर सकते हैं। उदाहरण के लिए, इस कम से कम (शायद अन्य) पर आईई, फ़ायरफ़ॉक्स, और क्रोम पर काम करता है:

HTML:

<input type='text' id='thingy' onblur="refocus(this);"> 

स्क्रिप्ट:

function refocus(elm) { 

    setTimeout(go, 0); 

    function go() { 
     elm.focus(); 
    } 
} 

Answer 3

<input type="text" name="barcode" onblur="this.focus();" />