centrándose en la siguiente entrada (jquery)

Question

Tengo cuatro entradas que cada una toma un número. Lo que quiero hacer es establecer el enfoque automáticamente en la próxima entrada una vez que se haya establecido el número. Todos tienen las "entradas" de clase.

esto no funcionó bastante:

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

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

Answer 1

que sugeriría el establecimiento maxlength como 1 a cada cuadro de texto y cambiar al siguiente una vez que el val.length y la maxlength es igual.

DEMO

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

Editar: pasado algún tiempo para el siguiente (no probado completamente, pero las pruebas básicas funcionaba bien)

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. 

Código:

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

que se acaba de obtener el siguiente elemento, sea lo que sea. Probablemente desee:

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

Además, no active la tecla o se cambiará demasiado pronto.

Answer 3

Use keyup e.g.

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

verlo en acción http://jsfiddle.net/qygB2/

Answer 4

Si está utilizando la última versión de jQuery, le recomiendo encarecidamente que utilice el método on. Si vas al código fuente jQuery, se dará cuenta de que todos los demás métodos de evento ahora redirigen a este método, así que por qué no lo usa directamente:

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

Answer 5

Después de buscar y desarrollar termino en una fragmento crossbrowser que hace posible enfocar el campo de entrada junto con una misma clase en función de maxlength (probado con 1 carácter), también con la capacidad de enfocar hacia atrás a través del botón de retroceso:

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

Esto mantendrá el foco en el cuadro de texto, después de usar siguiente sin nombrar la clase o id.

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

Answer 7

Sobre la base de @ respuesta de Vega

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

Si un usuario hace clic en una entrada que ya tiene un valor prevalecerá sobre ella, en vez de ir a la próxima entrada, sino que también sólo se centran en entradas de texto. Tuve una situación en la que tenía una entrada de envío junto a las entradas de texto y si usa el retroceso podría redirigir accidentalmente la página.

Answer 8

Aquí está el código que utilizo para hacer que la tecla Intro se comporte como una tabulación, es decir, enfoque al siguiente elemento al presionar la tecla Entrar o enfocar el elemento anterior al presionar Mayús + Entrar.

1) En esencia:

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

2) Aquí son una "clase" que encapsula el comportamiento, teniendo en cuenta fordward y hacia atrás y los elementos enfocable válidos.

espero que ayude y si algún código se adapte a sus necesidades, no dude en adaptarse a sus necesidades :)

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