जावास्क्रिप्ट में, वर्तमान में पूर्ण होने पर मैं कर्सर को अगले टेक्स्ट बॉक्स में स्वचालित रूप से कैसे स्थानांतरित कर सकता हूं?

Question

मान लीजिए मैं अपने वेब पेज पर दो एचटीएमएल बक्सें है:

<input type='text' id='txt1' maxlength='5' /> 
<input type='text' id='txt2' maxlength='5' /> 

प्रत्येक पाठ बॉक्स उपयोगकर्ता पाँच अक्षरों तक टाइप करने के लिए अनुमति देता है। जब मैं उपयोगकर्ता को पांच charcters txt1 में टाइप करता है तो मैं कर्सर को txt1 से txt2 पर स्वचालित रूप से कर्सर को स्वचालित रूप से स्थानांतरित करने के लिए jQuery के साथ या बिना जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं?

Answer 1

एक बुनियादी कार्यान्वयन इस तरह होगा:

$('#txt1').keyup(function() { 
    if(this.value.length == $(this).attr('maxlength')) { 
     $('#txt2').focus(); 
    } 
}); 

लेकिन वहाँ यह करने के लिए कुछ प्रयोज्य बारीकियों आप या के बारे में परवाह नहीं हो सकता है कर रहे हैं। यदि आप ऊपर अपर्याप्त होने के लिए पाते हैं, तो आपके लिए ऐसा करने के लिए वहां कई jQuery प्लगइन्स हैं।

Answer 2

विचार keydown ईवेंट को संभालने और जांचने के लिए है कि अधिकतम लंबाई तक पहुंच गई है या नहीं; यदि हां, तो अगले नियंत्रण पर ध्यान केंद्रित करें।

document.getElementById('txt1').onkeydown = function() { 
    if (this.value.length == this.maxLength) 
    document.getElementById('txt2').focus(); 
} 

Answer 3

इसे ऑटोोटैबिंग कहा जाता है, और ऐसे कई प्लगइन्स हैं जो jquery के लिए पहले से मौजूद हैं। इसे गूगल पर देखें।

यदि आप जानना चाहते हैं कि इसे कैसे करें, तो आप इनपुट करने के लिए एक ऑनकीप ईवेंट बाध्य करते हैं। प्रत्येक बार जब कोई कुंजी जारी की जाती है, तो सुनिश्चित करें कि यह "टैब" जैसी कार्यात्मक कुंजी नहीं है (आपको उपयोगकर्ता को इसके बिना इनपुट में "Shift + Tab" या "Tab" करने की अनुमति देनी चाहिए, फिर अगले फ़ील्ड पर ऑटोटैबिंग करना चाहिए।)

तो फिर, अगर इनपुट मूल्य की दूरी इनपुट के maxlength विशेषता से अधिक है, (अगले इनपुट पर ध्यान केंद्रित करने के लिए सेट jQuery, $currentInput.next('input').focus() में

Answer 4

आप इस तरह वर्ग नकल द्वारा jQuery यूआई के :focusable चयनकर्ता उपयोग कर सकता है:।

$.extend($.expr[':'], { 
    focusable: function(element) { 
     var nodeName = element.nodeName.toLowerCase(), 
      tabIndex = $.attr(element, 'tabindex'); 
     return (/input|select|textarea|button|object/.test(nodeName) 
      ? !element.disabled 
      : 'a' == nodeName || 'area' == nodeName 
       ? element.href || !isNaN(tabIndex) 
       : !isNaN(tabIndex)) 
      // the element and all of its ancestors must be visible 
      // the browser may report that the area is hidden 
      && !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length; 
    } 
}); 

फिर आप इसे इस तरह संभाल सकते हैं:

$(document).ready(function() { 
    $('input[type=text]').keydown(function() { 
     var $this = $(this), 
      $focusables = $(':focusable'), 
      current = $focusables.index(this), 
      $next; 

     if ($this.val().length == $this.attr('maxlength')) { 
      $next = $focusables.eq(current+1).length ?$focusables.eq(current+1) : $focusables.eq(0); 
       $next.focus(); 
     } 
    }); 
}); 

एक काम उदाहरण देखें:

इन समाधानों में से

http://jsfiddle.net/kU6ZN/

Answer 5

कोई भी सीधे जावास्क्रिप्ट में काम करते हैं ... इस स्निपेट एक शुरुआत है:

document.getElementById('txt1').onkeydown = function() { 
    if (this.value.length == this.maxLength) 
    document.getElementById('txt2').focus(); 
} 

लेकिन एक बार आपके द्वारा दिया गया संख्या, आप वापस नहीं जा सकते और इसे संपादित नहीं कर सकते, क्योंकि जैसे ही आप हटाते हैं, यह txt2 पर वापस चला जाता है।

बदलने की एकमात्र चीज इसे ऑनकीप पर बना देती है। : डी

jQuery अधिकतर चीज़ों के लिए ओवरकिल और आलसी प्रोग्रामिंग है, और यह महान उदाहरण है। जब तक आप इसे पृष्ठ पर पहले से ही उपयोग नहीं कर रहे हैं, तो यह एक छोटे से काम के लिए भयानक बहुत अधिक ओवरहेड है।

Answer 6

JQuery प्लगइन:

https://github.com/Mathachew/jquery-autotab

सरल उपयोग:

आपके इनपुट के लिए कक्षा autotabbed जोड़ें।

$('.autotabbed').autotab();