2012-01-25 8 views
7

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

हालांकि, जब प्रपत्र <Tab> कुंजी के माध्यम से दर्ज किया गया है (<Tab> कुंजी> दर्ज value-><Tab> कुंजी), यह नव दिखाई दिया क्षेत्र के लिए जाना नहीं है, लेकिन जो पहले दिखाई दे रही थी करने के लिए।

निम्नलिखित सरलीकृत उदाहरण है। यदि आप नंबर 1 के साथ फ़ील्ड में कुछ भी लिखते हैं, तो परिवर्तन ईवेंट चालू हो जाता है और मूल्य 2 के साथ इनपुट दिखाया जाता है, लेकिन आगे केंद्रित होने के बाद नहीं।

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<form> 
    <input id="input1" value="1" tabindex="1" onchange="$('#input2').show()"> 
    <input id="input2" value="2" tabindex="2" style="display: none;"> 
    <input id="input3" value="3" tabindex="3" onchange="$('#input4').show()"> 
    <input id="input4" value="4" tabindex="4" style="display: none;"> 
    <input id="input5" value="5" tabindex="5"> 
    <input id="input6" value="6" tabindex="6"> 
</form> 

इसकी जटिलता के कारण, मैं <Tab> कुंजी के प्रत्यक्ष नियंत्रण के साथ खेलने के लिए नहीं करना चाहते हैं। आगे, मैं onchange="$('#input2').show();$('#input2').focus()" का उपयोग नहीं कर सकता क्योंकि एक ही कोड का उपयोग उन मामलों में भी किया जाता है जब यह तत्काल अगला तत्व नहीं होता है। क्या इसे हल करने के कोई उपाय हैं?

किसी भी टिप्पणी/सुझाव के लिए अग्रिम धन्यवाद।

+0

मुझे ऐसी ही समस्या थी जहां 'एक्सचेंज' 'चयन 'पर था (इस मामले में एफएफ मुख्य समस्याग्रस्त ब्राउज़र है)। मैंने इसे 'कीप' पर एक ही क्रिया को बांधकर हल किया। बीटीडब्लू: अपने जेएस को अपने एचटीएमएल से बाहर रखें (या शायद आपने उन्हें केवल इस उदाहरण के लिए मिश्रित किया है?) –

उत्तर

0

click here for a working solution on jsFiddle.

मैं इस काम करने के लिए कुंजी दबाने के लिए इस्तेमाल किया। उदाहरण के लिए

, आप टेक्स्टफील्ड 1, 3, और 5 के माध्यम से आगे और पीछे टैब कर सकते हैं, फिर टेक्स्टफील्ड 1 का मान बदल सकते हैं जो टेक्स्टफील्ड 2 दिखाता है; फिर आप टेक्स्टफील्ड 2, 3, और 5 में टैब कर सकते हैं - और इसी तरह।

मुझे उम्मीद है कि मैंने आपकी चुनौती को सही ढंग से समझा है और यह सहायक है। खुश होती है।

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
     $("input").live("keypress", function() { 
      $(this).next().show() 
     }) 
     }) 
    </script> 

    <style type="text/css"> 
     .hidden { 
     display:none; 
     } 
    </style> 
</head> 
<body> 
<form> 
    <input id="input1" value="1"> 
    <input id="input2" value="2" class="hidden"> 
    <input id="input3" value="3"> 
    <input id="input4" value="4" class="hidden"> 
    <input id="input5" value="5"> 
    <input id="input6" value="6" class="hidden"> 
</form> 
</body> 
</html> 
संबंधित मुद्दे