[Pregunta]: autofocus="true" ya no me funciona

Leguim · 18 Diciembre 2019, 05:22 AM

Ayer me funcionaban perfecto los atributos autofocus="true" o autofocus en un <input> pero hoy ya no me servían más, no aparece una advertencia por consola ni nada solamente no anda no realiza el foco al elemento, estoy pensando que google pudo actualizar algo (cagarla básicamente) porque en otros navegadores a excepción de firefox probé y anduvieron bien...

Para hacerlo simple:

[Contenido de carga] <= Acá hay una ruedita "spinner infinito" que indica que está cargando la pagina.

[Contenido de la pagina] <= Acá va a estar el contenido de la pagina.

¿La pagina está lista?
(Sí): El [Contenido de carga] se oculta y se muestra [Contenido de la pagina].

En el [Contenido de la pagina] esta el input con autofocus="true"

<div> // Elemento superior
<input type="text" autofocus="true">
</div>

Si el elemento superior tiene un display:none; y luego le digo que tenga display:block; con un ... timeout por ejemplo o en este caso cuando cargue la pagina, cuando este lista (window.ready)

el autofocus ya no lo toma y esto lo pueden probar si quieren,

Código (html) [Seleccionar]


<style type="text/css">
	#elemento {
		display: none;
	}
</style>

<div id="elemento">
	<input type="text" name="" autofocus="true">
</div>

<script type="text/javascript">
	setTimeout(function() {
		document.getElementById('elemento').style.display = 'flex';
	}, 1000);
</script>

AlbertoBSD · 18 Diciembre 2019, 06:09 AM

Código (javascript) [Seleccionar]

document.getElementById("elemento").focus()

@XSStringManolo · 18 Diciembre 2019, 14:58 PM

Te hice un ejemplo:

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<meta charset="utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
<html>
<head>

</head>
<body>

<input type="text" id="usuario1" placeholder="Nombre De Usuario:" name="usuario" onfocus="alert('Introduzca su usuario');this.onfocus='null';" required />

<input type="password" class="asteriscos" placeholder="Contraseña:" name="contraseña" onfocus="alert('Introduzca su contraseña');this.onfocus='null';" required />

<button type="button" class="Boton-Grande" id="Boton-Grande" name="submit" >ENVIAR!</button>

<style>
input[type=text]:focus,
input[type=password]:focus
{
 webkit-transition-duration: 0.4s;
 transition-duration: 0.3s;
 -webkit-animation:animatezoom 0.3s;
  animation: animatezoom 0.3s
@-webkit-keyframes animatezoom 
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(2)}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(2)}
}

  width: 90vr;
  height: 15vr;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: #f1f1f1;
  color: black;
  cursor: pointer;
  outline: dashed;
}

.Boton-Grande
{
  -webkit-transition-duration: 0.3s; 
  transition-duration: 0.3s;

  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: blue;
  color: white;

 

}


.Boton-Grande:hover
{
  background-color: #a0a0a0;
  color: #000000;
  outline: dashed;
}


#usuario1:focus
{
 background-color: #f1fff1;
}


.asteriscos:focus
{
 background-color: #f1f1ff;
}
</style>

 <script>window.onload=document.getElementById("usuario1").focus();</script>

</body>
</html>

Cárgalo en un window.onload porque en una página como esta podría ser que se llamase al focus y no saltase el alert o no diese tiempo a cargarse los estilos css.

Imagínate con páginas complejas.

Leguim · 18 Diciembre 2019, 19:52 PM

Se me había ocurrido lo de hacerlo con javascript .focus(); la solución fue en parte con el código de abajo que me pasó manolo y digo en parte porque window.onload = function ya lo tenia era lo que usaba para cargar la pagina y probé pero quedaba cargando la pagina eternamente y era por eso porque no se pueden lanzar varias funciones con window.onload http://codexexempla.org/articulos/2007/lanzar_funciones.php así que hice como ellos me dijeron...

Código (javascript) [Seleccionar]


    window.addEventListener('load', function()
    {
    	form_index.input_email.focus();
    }, false);

¡Muchas gracias a los dos ya está todo funcionando, espero que google ya no la cague más

!

@XSStringManolo · 18 Diciembre 2019, 23:06 PM

Lanzadera.. Lmao.

Usa una función anónima. window.onload=function()
{
/* expresiones/llamadas separados por ; */
}

WHK · 18 Diciembre 2019, 23:34 PM

Nopues, como vas a hacer foco a un objeto que no está presente en la renderización. Debes darle foco al mismo tiempo que lo haces aparecer solamente.

Leguim · 19 Diciembre 2019, 07:53 AM

Cita de: WHK en 18 Diciembre 2019, 23:34 PM
Nopues, como vas a hacer foco a un objeto que no está presente en la renderización. Debes darle foco al mismo tiempo que lo haces aparecer solamente.

Es que me habia llamado la atencion porque hasta hace 2 días funcionaba bien...

WHK · 19 Diciembre 2019, 13:14 PM

Debieras usar un repositorio de código o control de cambios para haber visto tu código hace dos días atrás.

Leguim · 19 Diciembre 2019, 15:24 PM

Es que no toque nada, y en otros navegadores sirve el foco... brujería xD

@XSStringManolo · 19 Diciembre 2019, 15:58 PM

Cita de: MiguelCanellas en 19 Diciembre 2019, 15:24 PM
Es que no toque nada, y en otros navegadores sirve el foco... brujería xD

Lo tienen mal implementado en Chrome.