jquery: Farklı fieldetlerde olsa bile sonraki girişi seçin

Question

Şu html sayfam var:

<form action="editProfile" id="userInformation"> 
<fieldset id="birthdate"> 
<label><input type="text" id="day" maxlength="2"/>/<input type="text" id="month" maxlength="2"/>/<input type="text" id="year" maxlength="2"/> 
</fieldset> 
<fieldset> 
<label>Name</label><input type="text" id="name"/> 
</fieldset> 
</div> 

Şimdi sıradaki inputfield'a atlamak istiyorum. Denedim:

$("#birthdate input[type=text]").keyup(function(e){ 
    if($(this).val().length == $(this).attr('maxlength')){ 
     $(this).next(":input").focus(); 
    } 
}); 

Ama bu tarlada kalıyor gibi görünüyor. Ve nextall işe yaramıyor ya da yanlış kullanıyorum.

düzenleme: Şimdiye kadar benim çözümüm:

  if($(this).val().length == $(this).attr('maxlength')){ 
      if($(this).parent().children().last().attr('id') == $(this).attr("id")){ 
       $(this).parent().next().find(':input').focus(); 
      }else{ 
       $(this).next("input").focus(); 
      } 
     } 

Answer 1

:

function goToInput(distance) { 
    var $input = $(this), 
     $inputs = getInputs(), 
     currentIndex = $inputs.index($input), 
     newIndex = ($inputs.length + currentIndex + distance) % $inputs.length; 

    if (currentIndex > -1) { 
     $input.blur(); 
     $inputs.eq(newIndex).focusin().focus(); 
    } 
} 

function getInputs() { 
    return $('#userInformation :input:visible:enabled'); 
} 

function goToNextInput() { 
    goToInput.apply(this, [1]); 
} 

function goToPreviousInput() { 
    goToInput.apply(this, [-1]); 
} 

ve sonra

getInputs().keyup(goToNextInput); 

Answer 2

özel bir yöntem kullanarak bir çözüm (http://jsfiddle.net/jamiec/uQdSS/ çalışma örneği) 'dir Bir fieldet içinde son öğe olduğu mantığı.

Answer 3

Bu bir çözümdür. Muhtemelen en iyi çözüm ama döngüsüne girdi yaş eski modül operatörünü kullanarak iş gibi görünüyor:

(function() { 
    var inputs = $("#userInformation input[type=text]"), 
     i = 0, 
     length = inputs.length; 

    inputs.keyup(function(e) { 
     if ($(this).val().length == $(this).attr('maxlength')) { 
      i = ++i % length; 
      inputs[i].focus(); 
     } 
    }); 

}()); 

Örnek: http://jsfiddle.net/jonathon/DysJe/

Ben de girişler için selektör bir değişiklik yaptık. birthdate alan kümesini seçmek yerine, formdaki tüm girdileri alıyorum. Bunları bir diziye yapıştırın ve onlara odaklanın. Herşeyi gizlediğim değişkenleri her şeyden uzak tutmak için her şeyi kendi kapamaya koydum.

Son girişe ulaştığında, yalnızca durur (maxlength ayarlanmamışsa) veya odağı yeniden baştan döndürür. Dönmesini istemiyorsanız, modül operatörünü kaldırmanız yeterlidir.

Bir dezavantajı olsa var: kullanıcı ilk elemanın odaklanmak etmezse o zaman bu göz ardı eder ve sadece vs.

---

I ikinci, üçüncü, odaklanmak için devam Bu konuda biraz daha fazla yaptım ve diğer değişken ihtiyacını ortadan kaldırdı. Bu, bir sonraki uçta çalışmaz, en baştan belirlenir. Her input, olay öğesinin sonraki öğeye i numaralı öğeye değil, inputs listesindeki bir sonraki öğeye odaklanmasına ayarlandı. vb üçüncü ilerleme edeceğiz ikincisi,

(function() { 
    var inputs = $("#userInformation input"); 

    inputs.each(function(i, item) { 
     $(item).keyup(function() { 
      if ($(this).val().length == $(this).attr('maxlength') && inputs[i + 1]) { 
       inputs[i + 1].focus(); 
      } 
     }); 
    }); 
}()); 

http://jsfiddle.net/jonathon/TQzKS/

kullanıcı sekmeler Sen isteyebilirsiniz eğer yüzden yukarıdaki gibi değil döngüsü içinden ancak doğru hareket edecek Giriş öğeleriniz için tabIndexes'u da ayarlayın. JQuery öğelerinin döndürdüğü sırayla% 100 değilim - DOM yapısına bağlı olabileceğini düşünüyorum. Siparişinizde alışılmadık bir şey varsa, .each parçasını çalıştırmadan önce inputs listesini sıralamak için öğenin tabIndex değerini kullanabilirsiniz.

Evet ve her iki örnekte de keyup olayını, yazmayı bitirdiğim anda hareket etmesini sağladım.

Answer 4

hangi iyi çalışıyor, son zamanlarda böyle bir şey kullandı: Ben de benim ana bunu ekledi biliyoruz

$("#birthdate input[type=text]").keyup(function(e){ 
    if($(this).val().length == $(this).attr('maxlength')){ 
     var $next = $(this).next(":input"); 
     if ($next.length == 0) // there are no next fields! try another fieldset 
     $next = $(this).closest("fieldset").next("fieldset").find(":input:first"); 
     $next.focus(); 
    } 
}); 

Answer 5

bu deneyin post ama bu yorum almak için daha kolaydır. Pek çok çözülme var gibi görünüyor. Şimdilik

Kendi çözüm:

if($(this).val().length == $(this).attr('maxlength')){ 
      if($(this).parent().children().last().attr('id') == $(this).attr("id")){ 
       $(this).parent().next().find(':input').focus(); 
      }else{ 
       $(this).next("input").focus(); 
      } 
     } 

ben probabily biraz eğer ikinci basitleştirmek düşünüyorum ama esnek oldukça straightfoward tutmaya çalıştı.