koncentrując się na następnym wejściu (jquery)

Question

Mam cztery wejścia, z których każdy przyjmuje jeden numer. To, co chcę zrobić, to ustawić ostrość automatycznie na kolejne wejście po ustawieniu liczby. Wszystkie mają klasę "dane wejściowe".

To nie do końca pracy:

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

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

Answer 1

Proponuję ustawienie maxLength jak 1 do każdego pola tekstowego i przełączyć się na następny raz na val.length i maxlength to samo.

DEMO

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

Edit: spędził trochę czasu na następujące (nie w pełni przetestowane, ale podstawowe badania działało w porządku)

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. 

Kod:

$(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

To będzie po prostu kolejny element, cokolwiek to jest. Prawdopodobnie chcesz:

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

Co więcej, klucz nie jest kluczem keidown lub zbyt szybko się zmieni.

Answer 3

Użyj keyup np.

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

Zobacz go w akcji http://jsfiddle.net/qygB2/

Answer 4

Jeśli używasz najnowszej wersji jQuery, zdecydowanie zalecam użycie metody on. Jeśli pójdziesz do kodu źródłowego jQuery, można zauważyć, że wszystkie inne metody zdarzeń teraz przekierować do tej metody, więc dlaczego nie użyć go bezpośrednio:

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

Answer 5

Po wyszukaniu i rozwijanie I skończyć w crossbrowser fragment, który pozwala skupić wejściowego polu obok z tej samej klasy w zależności od MAXLENGTH (testowane z 1 znak) również z możliwością skupienia się z powrotem za pomocą przycisku Backspace:

JavaScript (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(); 
    } 
    } 
}); 

HTML:

<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

To będzie koncentrować się na polu tekstowym, po użyciu następnego bez nazywania klasy lub identyfikatora.

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

Answer 7

Opierając się na @ Vega odpowiedź

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; 
    } 
}); 

Jeśli użytkownik kliknie na wejściu, który ma już wartość będzie go zastąpić, zamiast iść do następnego wejścia, to będzie tylko koncentrować się również na wprowadzania tekstu. Miałem sytuację, w której dane wejściowe zostały przesłane obok danych wejściowych tekstu, a użycie backspace mogłoby spowodować przypadkowe przekierowanie strony.

Answer 8

Oto kod, którego używam do tworzenia klawisza Enter, aby zachowywać się jak karta, tj. Ustawić ostrość na następny element po naciśnięciu klawisza Enter lub ustawieniu ostrości poprzedniego elementu po naciśnięciu klawisza Shift + Enter.

1) Zasadniczo:

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

2) Tu jesteś „klasa”, która obudowuje zachowanie, mając na uwadze fordward i do tyłu i ważnych elementów aktywowana.

Mam nadzieję, że to pomaga, a jeśli jakiś kod odpowiada Twoim potrzebom, czuć się swobodnie dostosować do swoich potrzeb :)

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();