entrada en el foco o la tecla de tabulación presionada, mover al centro de la pantalla

Tengo una serie de campos de formulario que abarcan el doblez de la página. Al presionar la tecla "tab" para recorrer cada campo de entrada/selección, se sienta el siguiente campo en la parte inferior de la página.entrada en el foco o la tecla de tabulación presionada, mover al centro de la pantalla

Algunos de mis campos tienen información sobre herramientas, las respuestas de validación y de auto sugieren cajas que aparecen debajo del campo. Al tabular en el campo, no puede ver estos elementos debajo del pliegue de la página.

¿Hay una secuencia de comandos javascript o jQuery que pueda centrar verticalmente la pantalla alrededor de un campo enfocado de entrada/área de texto/seleccionar/en lugar de alinearse en la parte inferior?

Fuente

2009-12-03 Peter Craig

No sé los demás, pero un cambio de posición de la pantalla cada vez que cambio de enfoque podría conducir me loco * *. Preferiría una solución que desplaza el desplazamiento solo cuando uno de los elementos requeridos no está completamente dentro de la ventana gráfica. –

Entonces, ¿mi respuesta funciona para usted? Por favor, proporcione un comentario si/por qué no es satisfactorio para su problema – jitter

@Pekka Estoy de acuerdo en que esta es una acción peculiar y se usaría con moderación ya que sería molesto. Solo estoy tratando de pensar en una solución adecuada: tal vez solo centre el campo cuando "tabbing" no esté enfocado o tal vez deslice la animación del desplazamiento. De lo contrario, ¿cuáles son algunas otras formas de mantener la entrada de foco acolchada desde el pliegue de la página? –

Usted sólo puede unirse al evento de foco y luego calcular el desplazamiento del terreno y centrarlo en la pantalla.

$(':input').focus(function(){ 
    var center = $(window).height()/2; 
    var top = $(this).offset().top ; 
    if (top > center){ 
     $(window).scrollTop(top-center); 
    } 
});

Fuente

2009-12-03 13:36:33 PetersenDidIt

Creo que esta es la solución más simple para mi pregunta, pero como se comentó, la acción no es estándar y podría ser una acción molesta en la mayoría de los casos: la pregunta necesita ser redefinida ligeramente para que tenga un uso práctico para esta solución. –

Al hacer algunas comprobaciones, obtiene los valores correctos pero la ventana o el documento scrollTop() no quiere jugar a la pelota ... Lo he cambiado a la identificación div (#div) .scrollTop que casi lo hace pero no lo está Es tan consistente como esperaba que fuera el cuerpo o la ventana. –

A veces hay problemas con Firefox y/o Chrome. Usted puede tratar de '$ ('html, body') animar. ({ScrollTop: top - center}, 300);' Eso funciona para mí – schemar

Lo más fácil sería incluir la jQuery ScrollTo plugin y la jQuery Viewport plugin.

luego envolver cada entrada + otros elementos relacionados (respuesta de validación, ....) en un div.

En comprobación de enfoque si el div es completamente visible, si no uso scrollTo. Hecho.

Por supuesto, esto es un poco de hinchazón, pero si se puede vivir con los 2 dependencias más y un ~ 4 kb adicional que esto debería funcionar sin hacer los cálculos usted mismo.

Fuente

2009-12-03 15:22:04 jitter

mismo desde arriba con efecto de desplazamiento suave

$(':input').focus(function() { 
     var center = $(window).height()/2; 
     var top = $(this).offset().top; 
     if (top > center) { 
      $('html, body').animate({ scrollTop: top - center }, 'fast');    
     } 
    });

Fuente

2016-08-17 05:20:55

¡genial! gracias amigo –

entrada en el foco o la tecla de tabulación presionada, mover al centro de la pantalla

Respuesta

Cuestiones relacionadas