अगले इनपुट (jquery) पर ध्यान केंद्रित

Question

मुझे चार इनपुट मिल गए हैं जिनमें प्रत्येक एक नंबर लेता है। मैं जो करना चाहता हूं वह नंबर सेट होने के बाद स्वचालित रूप से अगले इनपुट पर फ़ोकस सेट कर देता है। उनके पास कक्षा "इनपुट" है।

यह काफी काम नहीं किया:

$(".inputs").keydown(function() { 

      $(this).next().focus(); 
     }); 

Answer 1

करते हुए देखें मैं एक पाठ बॉक्स के लिए 1 के रूप में maxlength स्थापित करने का सुझाव देते हैं और अगले एक एक बार val.length करने के लिए स्विच जाएगा और maxlength में ही है।

DEMO

$(".inputs").keyup(function() { 
    if (this.value.length == this.maxLength) { 
     $(this).next('.inputs').focus(); 
    } 
}); 

संपादित करें: निम्नलिखित के लिए कुछ समय बिताया (पूरी तरह से परीक्षण नहीं है, लेकिन बुनियादी परीक्षण ठीक काम किया)

1. Allowing just numeric chars 
    2. Allow some control like del, backspace, e.t.c 
    3. Backspace on empty textbox will move to prev textbox 
    4. charLimit var to dynamically decide how many char you want to restrict. 

कोड:

$(function() { 
    var charLimit = 1; 
    $(".inputs").keydown(function(e) { 

     var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145]; 

     if (e.which == 8 && this.value.length == 0) { 
      $(this).prev('.inputs').focus(); 
     } else if ($.inArray(e.which, keys) >= 0) { 
      return true; 
     } else if (this.value.length >= charLimit) { 
      $(this).next('.inputs').focus(); 
      return false; 
     } else if (e.shiftKey || e.which <= 48 || e.which >= 58) { 
      return false; 
     } 
    }).keyup (function() { 
     if (this.value.length >= charLimit) { 
      $(this).next('.inputs').focus(); 
      return false; 
     } 
    }); 
}); 

DEMO

Answer 2

कि बस अगले तत्व मिल जाएगा, जो कुछ भी यह है। आप शायद चाहते हैं:

$(".inputs").keyup(function() { 
    $(this).next(".inputs").focus(); 
}); 

इसके अलावा, कुंजीडाउन की कुंजी नहीं है या यह बहुत जल्द बदल जाएगा।

Answer 3

keyup उदा।

$(".inputs").keyup(function() { 
    $(this).next().focus(); 
});​ 

कार्रवाई http://jsfiddle.net/qygB2/

Answer 4

यदि आप नवीनतम jQuery संस्करण का उपयोग कर रहे हैं, तो मैं दृढ़ता से आपको on विधि का उपयोग करने की सलाह देता हूं। आप jQuery स्रोत कोड के लिए जाना है, तो आप देखेंगे कि सभी अन्य घटना तरीके अब इस विधि को अनुप्रेषित, तो क्यों यह सीधे का उपयोग नहीं करते:

$(document).ready(function() { 
     $('.inputs').on('keyup', function(){ 
      $(this).next().focus(); 
     }) 
}); 

Answer 5

खोज और विकासशील मैं एक में समाप्त होने के बाद

जावास्क्रिप्ट (jQuery):

var codeCharInput = 'input.code-char'; 
$(codeCharInput+':first').focus(); 
$(codeCharInput).keyup(function(e) { 
    if ((e.which == 8 || e.which == 46)) { 
    $(this).prev(codeCharInput).focus().val($(this).prev().val()); 
    } else { 
    if (this.value.length == this.maxLength) { 
     $(this).next(codeCharInput).focus(); 
    } 
    } 
}); 

crossbrowser टुकड़ा जो संभव बनाता है बैकस्पेस बटन के माध्यम से वापस ध्यान केंद्रित करने की क्षमता के साथ maxlength (1 चरित्र के साथ परीक्षण) के आधार पर एक ही कक्षा के साथ अगले इनपुट क्षेत्र ध्यान केंद्रित करने की भी

एचटीएमएल:

<input type="text" name="chars[]" maxlength="1" class="code-char" /> 
<input type="text" name="chars[]" maxlength="1" class="code-char" /> 
<input type="text" name="chars[]" maxlength="1" class="code-char" /> 
<input type="text" name="chars[]" maxlength="1" class="code-char" /> 

Answer 6

यह कक्षा या आईडी नाम दिए बिना अगली उपयोग करने के बाद टेक्स्ट बॉक्स पर ध्यान केंद्रित करेगा।

$(this).hide();   
$(this).next().show(); 
$('input[type=text]').focus(); 

Answer 7

बिल्डिंग @ पर वेगा के जवाब

inputs.keydown(function(e) { 
    var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145]; 

    $(this).val(''); 

    if (e.which == 8 && this.value.length == 0) { 
     $(this).prev(inputs).focus(); 
    } else if ($.inArray(e.which, keys) >= 0) { 
     return true; 
    } else if (this.value.length > charLimit) { 
     $(this).next(inputs).focus(); 
     return false; 
    } else if (e.shiftKey || e.which <= 48 || e.which >= 58) { 
     return false; 
    } 
}).keyup (function() { 
    if (this.value.length >= charLimit && $(this).next(inputs).attr('type') === 'text') { 
     $(this).next(inputs).focus(); 
     return false; 
    } 
}); 

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

Answer 8

यहां कोड है जिसका उपयोग मैं टैब के रूप में व्यवहार करने के लिए एंटर कुंजी बनाने के लिए करता हूं, यानी, एंटर कुंजी दबाते समय अगला तत्व पर ध्यान केंद्रित करें या Shift + Enter दबाते समय पिछले तत्व पर ध्यान केंद्रित करें।

1) अनिवार्य रूप से:

tabables = $("*[tabindex != '-1']:visible"); 
var index = tabables.index(element); 
tabables.eq(index + 1).focus(); 

2) यहाँ आप एक "वर्ग" है कि व्यवहार समाहित, मन fordward और पीछे की ओर और वैध फ़ोकस करने योग्य तत्वों में होने हैं।

मुझे आशा है कि यह मदद करता है और अगर कुछ कोड सूट अपनी आवश्यकताओं, अपनी आवश्यकताओं :)

EnterAsTab = function() { 
    this.ENTER_KEY = 13; 
}; 

EnterAsTab.prototype.init = function() { 
    this.listenOnEnterKey(); 
}; 

EnterAsTab.prototype.listenOnEnterKey = function() { 

    var me = this; 
    $('form input').on('keypress', function (event) { 

      if (event.which === me.ENTER_KEY) { 

       if (!event.shiftKey) 
        me.findNextFocusableElement(this); 
       else 
        me.findPreviousFocusableElement(this); 

       event.preventDefault(); 
      } 
     } 
    ); 
}; 

EnterAsTab.prototype.findNextFocusableElement = function (element) { 
    this.findFocusableElement(element, this.increaseIndex); 
}; 

EnterAsTab.prototype.findPreviousFocusableElement = function (element) { 
    this.findFocusableElement(element, this.decreaseIndex); 
}; 

EnterAsTab.prototype.findFocusableElement = function (element, callable) { 

    var tabables = $("*[tabindex != '-1']:visible"); 
    var index = tabables.index(element); 
    var counter = 1; 
    var nextElement = undefined; 

    try { 

     while (true) { 

      if ((nextElement = tabables.eq(index + counter)).length === 0) { 
       break; 
      } 

      if (this.isFocusableElement(nextElement)) { 

       var newIndex = callable.call(this, index, counter); 
       tabables.eq(newIndex).focus(); 

       break; 
      } else { 
       counter++; 
      } 
     } 
    } catch (error) { 
     console.log(error); 
    } 

}; 

EnterAsTab.prototype.increaseIndex = function (index, counter) { 
    return (index + counter); 
}; 

EnterAsTab.prototype.decreaseIndex = function (index, counter) { 
    return index - counter; 
}; 

EnterAsTab.prototype.isFocusableElement = function (element) { 

    return ['SELECT', 'TEXTAREA'].indexOf(element.prop('tagName')) > -1 || 
     element.is(':text') || 
     element.is(':checkbox') || 
     element.is(':radio'); 
}; 

var enterAsTab = new EnterAsTab(); 
enterAsTab.init();