रेडियो बटन समूह के अंदर टेक्स्ट इनपुट

Question

पर क्लिक करते समय फ़ायरफ़ॉक्स में फोकस खो देता है मुझे फ़ायरफ़ॉक्स में कोई समस्या हो रही है, जहां आप फ़ायरफ़ॉक्स में <input type="text"> पर क्लिक करते हैं, तो फोकस तुरंत रेडियो बटन भाई में बदल दिया जाता है।

व्यवहार क्रोम में लक्षित के रूप में कार्य करता है। क्या इसे ठीक करने के लिए मुझे अतिरिक्त जावास्क्रिप्ट चाहिए?

Answer 1

लगता है जैसे फ़ायरफ़ॉक्स वास्तव में के अनुसार सही बात कर रही है W3C:

तो विशेषता के लिए निर्दिष्ट नहीं है, लेकिन लेबल तत्व एक labelable तत्व वंशज है, तो है पेड़ क्रम में पहला ऐसा वंशज लेबल तत्व का लेबल वाला नियंत्रण है।

आपका लेबल दो इनपुट तत्वों को लपेट रहा है, इसलिए जब आप टेक्स्ट बॉक्स में क्लिक करते हैं, तो रेडियो (पेड़ क्रम में पहला ऐसा वंशज) फोकस प्राप्त करता है।

परिणाम कैसे ब्राउज़र इस नियम को लागू किया है पर निर्भर करती है, इसलिए क्रॉस-ब्राउज़र परिणाम हाँ सुनिश्चित करने के लिए, आप में कदम रखने जावास्क्रिप्ट आवश्यकता होगी।

Answer 2

क्या कुछ आसपास खुदाई और एक jQuery के साथ इस jsFiddle पाया उपाय। रेडियो इनपुट पर trigger.click(); फायरिंग टेक्स्टबॉक्स पर क्लिक करते समय इसका चयन करेगा।

Answer 3

MDN से

:

अनुमति सामग्री: Phrasing सामग्री है, लेकिन कोई वंशज लेबल तत्वों। लेबल किए गए नियंत्रण के अलावा कोई लेबल करने योग्य तत्वों की अनुमति नहीं है।

असल में, लेबल के भीतर दो इनपुट डालने वैध मार्कअप नहीं है। अपने HTML मार्कअप बदलें ताकि लेबल केवल रेडियो इनपुट (और किसी भी पाठ लेबल) लपेटता ...

<label class="radio"> 
    <input type="radio" name="requestfor" id="optionsRadios2" value="someoneelse" /> 
    Behalf of 
</label>  
<input type="text" name="behalfof" id="behalfid"/> 

... और फिर जावास्क्रिप्ट का उपयोग (या मेरे आलसी मामले, jQuery में) रेडियो का चयन करने के:

$('#behalfid').click(function(){ 
    $('#optionsRadios2').trigger('click'); 
}); 

Here's the fiddle।