Mostrar los tags: focus

Mostrando del 1 al 4 de 4 coincidencias
<<>>
Se ha buscado por el tag: focus
Imágen de perfil

Focus / Blur Efectos en Web Site


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 22 de Febrero del 2022 por Scriptshow (141 códigos) (Publicado el 20 de Noviembre del 2017)
3.394 visualizaciones desde el 20 de Noviembre del 2017
Script que cambia el aspecto de una web, intro, etc. al clicar dentro o fuera del navegador. Los eventos: OnFocus / OnBlur asociados a funciones JavaScript, cambian la/s Clase/s y contenidos de un Sitio Web. Abre el browser en primer plano; haz click sin cerrarlo ni minizarlo para ver el efecto.

Piensa en posibles aplicaciones...

Espero sea útil.

Un saludo
Imágen de perfil

Menú emergente al obtener el foco o pasar el ratón


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 21 de Agosto del 2020 por Katas (47 códigos)
1.930 visualizaciones desde el 21 de Agosto del 2020
Código que muestra un menú emergente interactivo desplazandose hacia la derecha al obtener el foco, o al pasar el ratón por encima.

left: 100% Mueve el menú emergente el 100% del ancho de su padre desde la izquierda.
.reference: hover> .popout-menu Significa que cuando se coloca el cursor sobre .reference, seleccione los elementos secundarios inmediatos con la clase .popout-menu y cambie su visibilidad a visible, que muestra la ventana emergente.
.reference: focus> .popout-menu Significa que cuando .reference está enfocado, se mostrará la ventana emergente.
.reference: focus-within> .popout-menu Asegura que la ventana emergente se muestre cuando el foco está dentro de la referencia.

menu-emergente
Imágen de perfil

Como obtener el elemento que tiene el foco con JavaScript


JavaScript

Publicado el 24 de Febrero del 2020 por Joan (121 códigos)
3.617 visualizaciones desde el 24 de Febrero del 2020
Este código muestra como saber que elemento de nuestro formulario o pagina tiene el foco.

Para saber si un elemento tiene el foco, hay que comprobar si ese elemento es igual al document.activeElement, algo así:

1
if (document.activeElement === element) {}

donde element tiene que hacer referencia a un objecto, ya sea por su id, DOM, etc...

1
2
element=document.getElementById("elementoFormulario");
if (document.activeElement === element) {}

elemento-focus
Imágen de perfil

Cambiar la aparicencia de un formulario si algun elemento obtiene el foco


CSS

Publicado el 18 de Septiembre del 2019 por Joan (121 códigos)
1.676 visualizaciones desde el 18 de Septiembre del 2019
La pseudo clase focus-within aplica estilos a un elemento padre si algún elemento hijo obtiene el foco.
En este ejemplo se muestra el uso de focus-within en un formulario, cuando un elemento de entrada obtiene el foco dentro de un formulario.

Sin el foco
sin-el-foco

Con el foco
con-el-foco