He creado una página con jquery, y al cargarlo, selecciona automáticamente el primer campo de texto. Quiero que pase al siguiente campo cuando se presiona la tecla ENTER.Seleccione el campo NEXT en la tecla Intro Presione
$('.barcodeField input').bind('keyup', function(event) {
if(event.keyCode==13){
$("this + input").focus();
}
});
No puedo encontrar nada que funcione en la red. Y he recorrido los foros.
que puedes usar:
$(this).next('input').focus();
Esto funcionará si el próximo hermano es un '', pero si es un '
Básicamente, sólo tiene la parte superior tiene los elementos DOM en alguna estructura para que pueda seleccionar el siguiente. Sugiero explotar Tabindex, pero cualquier cosa que te permita tener un orden definido funcionará.
He creado una pequeña función que puede hacer lo que necesita. Esta es la versión que uso, por lo que es posible que necesite cambiar los nombres de las clases, pero debe entenderse.
<script type="text/javascript">
$(document).ready(function(){
$(".vertical").keypress(function(event) {
if(event.keyCode == 13) {
textboxes = $("input.vertical");
debugger;
currentBoxNumber = textboxes.index(this);
if (textboxes[currentBoxNumber + 1] != null) {
nextBox = textboxes[currentBoxNumber + 1]
nextBox.focus();
nextBox.select();
event.preventDefault();
return false
}
}
});
})
</script>
Así que, básicamente: -
bien hecho, esa es una buena respuesta – MaVRoSCy
debería ser la respuesta aceptada! – nemesisfixx
cualquier idea en hacer círculo si llega al final de la entrada ir al índice 0 algo así? –
prueba esto:
(function($){
$.fn.enterNext = function(){
var _i =0;
$('input[type=text], select',this)
.each(function(index){
_i = index;
$(this)
.addClass('tab'+index)
.keydown(function(event){
if(event.keyCode==13){
$('.tab'+(index+1)).focus();
event.preventDefault();
}
});
})
$("input[type=submit]",this).addClass('tab'+(_i+1));
}})(jQuery);
para su uso:
$('form.element').enterNext();
en mi caso esta es la mejor solución en la que me dieron porque el .Next función() es estricto con los elementos DOM fuera de su rama. La mejor manera es forzar un índice.
y lo siento por mi mala Inglés ...
Aquí está la solución que se me ocurrió. El problema que tuve fue que necesitaba mantener el tabindex, es decir, tenía que funcionar exactamente igual que al presionar la pestaña. Utiliza tanto guión bajo como jquery.
he dejado en mi código de depuración:
try {
var inputs = $("input[id^=tpVal-]");
var sortedInputs = _.sortBy(inputs, function(element){
var tabIndex = $(element).attr('tabindex');//debugging
var id = $(element).attr('id');//debugging
console.log(id +" | "+ tabIndex +" | "+ $(element));//debugging
return parseInt($(element).attr('tabindex'));
});
$(sortedInputs).each(function (index, element) {
$(element).keyup(function(event){
if(event.keyCode==13) {
var $thisElement = $(element);//debugging
var nextIndex = index+1;//debugging
var $nextElement = $(sortedInputs[nextIndex]);
var thisId = $thisElement.attr('id');//debugging
var nextId = $nextElement.attr('id');//debugging
console.log("Advance from "+thisId+" to "+nextId);//debugging
if($nextElement!=undefined) {
$(sortedInputs[index + 1]).focus();
}
}
});
});
} catch (e) {
console.log(e);
}
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input id="122" class='TabOnEnter' tabindex="1" /><br>
<input id="123" class='TabOnEnter' tabindex="2" /><br>
<input type="text" name="abc" /><br>
<input type="text" name="abc1" /><br>
<input type="text" name="abc2" /><br>
<input type="text" name="abc3" class='TabOnEnter' tabindex="3" /><br>
<input class='TabOnEnter' tabindex="4" /><br>
<input class='TabOnEnter' tabindex="5" /><br>
<input class='TabOnEnter' tabindex="6" /><br>
<!-- <textarea class='TabOnEnter' tabindex="6">Hi, I am a test area</textarea>-->
<input type="submit" value="submit" class='TabOnEnter' tabindex="7">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on("keypress", ".TabOnEnter", function (e)
{
//Only do something when the user presses enter
if (e.keyCode == 13)
{
var nextElement = $('[tabindex="' + (this.tabIndex + 1) + '"]');
console.log(this, nextElement);
if (nextElement.length)
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
//Hidden inputs should get their tabindex fixed, not in scope ;)
//$(function(){ $('input[tabindex="4"]').fadeOut(); })
</script>
</body>
</html>
interesante, porque respondió a una pregunta como esta :) http://stackoverflow.com/questions/4494552/change-enter- from-submission-to-tab/4494691 # 4494691. Además, desaconsejaría esto, porque los usuarios están acostumbrados a usar la pestaña para ir a otro campo en lugar de ingresar. –
** no lo hagas **. – zzzzBov
Sí, sé que esto es un total no no cuando se trata de páginas web, pero esto es para un sistema de mapeo de códigos de barras usando un escáner de código de barras, que escribe en la pantalla en este formato "," + código de barras + "ENTER" –