Javascript Ingresar en el formulario Enviar a la pestaña

Question

Javascript obtiene presionar el evento "Enter" en el texto de tipo de entrada

Tengo 3 entradas de texto, 1 lista desplegable y 10 filas.

La fila 1 tendrá un identificador de _1 para la entrada de texto 3 y el menú desplegable seguido de _2 para la fila 2.

Lo que quería lograr es:

Textfield1 ------>   left_1
Textfield2 ------>   center_1
Textfield3 ------>   right_1
DropdownList ---->   dd_1

Cuando presiono enter en left_1, quiero cambiar el evento enter como una especie de "pestaña" a center_1, mientras que si ingreso el evento en center_1, se tabulará en {{ X3}}.

Si ingreso el evento en right_1, pasará a la siguiente fila left_2.

El problema es normalmente si presiona "tab" en right_1, se enfocará en dd_1

El siguiente problema clave es que obtuve un botón de envío en el formulario, si presiono enter en cualquiera de los formularios, simplemente enviará el formulario. Intenté antes de deshabilitar la entrada usando verificar el código de evento y evitar el valor predeterminado, pero al hacerlo, todavía no puedo cambiar mi entrada para enfocarme en el campo de texto como se mencionó anteriormente

JsFiddle en mi pregunta

Necesito poder ir a la fila 2 en la última entrada para la primera fila al ingresar.

javascript jquery html

4

user3412075 29 ago. 2014 a las 12:22

Answer 1

Use la propiedad tabindex:

http://www.w3.org/WAI/UA/TS/html401/cp0101/0101-TABINDEX.html

Y actualice su script para navegar usando su valor:

    var nextIndex = $(this).prop('tabindex') + 1;
    $('[tabindex=' + nextIndex + ']').focus();

Ejemplo completo:

http://jsfiddle.net/kL2ntc2u/7/

2

Tobías 29 ago. 2014 a las 08:41

Answer 2

Si quieres hacerlo como ahora. Puede ajustar algunos de los javascript.

if(e.keyCode == "13"){     
   var id = $(this).attr('id');
   if(id.indexOf("right") > -1){
       var number = id.split('_')[1];
       number++;
       $("#left_"+number).focus();
    }else{
        $(this).next().focus();
    }            
}

http://jsfiddle.net/mko1hght/

1

TeeDeJee 29 ago. 2014 a las 08:49

Answer 3

Para la navegación por pestañas, sugeriría ir a tabindex

Su pregunta parece tener 2 modos de enfocar el elemento de entrada.

mediante la tecla enter
a través de la tecla de tabulación

Como ya sugerí, quédate con tabindex

Para evitar el envío del formulario al ingresar la clave y su caso de uso # 2, el siguiente enfoque hará el trabajo

$(function () {
    $("form :input").on("keypress", function (e) {
        var nextIndex = $(this).prop('tabindex') + 1; // from above answer
        $('[tabindex=' + nextIndex + ']').focus();
        return e.keyCode != 13;  // this will ensure to prevent form submit
    });
});

JSFiddle

2

Praveen 29 ago. 2014 a las 09:40

Javascript Ingresar en el formulario Enviar a la pestaña

3 respuestas

Preguntas relacionadas

Preguntas vinculadas

Nuevas preguntas

javascript