Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Leguim en 18 Diciembre 2019, 05:22 am


Título: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: Leguim en 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...

(https://i.ytimg.com/vi/tHw7IIchAZI/hqdefault.jpg)

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
  1. <style type="text/css">
  2. 	#elemento {
  3. 		display: none;
  4. 	}
  5. </style>
  6.  
  7. <div id="elemento">
  8. 	<input type="text" name="" autofocus="true">
  9. </div>
  10.  
  11. <script type="text/javascript">
  12. 	setTimeout(function() {
  13. 		document.getElementById('elemento').style.display = 'flex';
  14. 	}, 1000);
  15. </script>
  16.  

Título: Re: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: AlbertoBSD en 18 Diciembre 2019, 06:09 am
Código
  1. document.getElementById("elemento").focus()

Título: Re: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: @XSStringManolo en 18 Diciembre 2019, 14:58 pm
Te hice un ejemplo:

Código
  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
  6.  
  7. </head>
  9.  
  10. <input type="text" id="usuario1" placeholder="Nombre De Usuario:" name="usuario" onfocus="alert('Introduzca su usuario');this.onfocus='null';" required />
  11.  
  12. <input type="password" class="asteriscos" placeholder="Contraseña:" name="contraseña" onfocus="alert('Introduzca su contraseña');this.onfocus='null';" required />
  13.  
  14. <button type="button" class="Boton-Grande" id="Boton-Grande" name="submit" >ENVIAR!</button>
  15.  
  17. input[type=text]:focus,
  18. input[type=password]:focus
  19. {
  20.  webkit-transition-duration: 0.4s;
  21.  transition-duration: 0.3s;
  22.  -webkit-animation:animatezoom 0.3s;
  23.   animation: animatezoom 0.3s
  24. @-webkit-keyframes animatezoom 
  25.   from {-webkit-transform:scale(0)} 
  26.   to {-webkit-transform:scale(2)}
  27.  
  28. @keyframes animatezoom {
  29.   from {transform: scale(0)}
  30.   to {transform: scale(2)}
  31. }
  32.  
  33.   width: 90vr;
  34.   height: 15vr;
  35.   padding: 12px 20px;
  36.   margin: 8px 0;
  37.   border: 1px solid #ccc;
  38.   box-sizing: border-box;
  39.   display: block;
  40.   margin-left: auto;
  41.   margin-right: auto;
  42.   background-color: #f1f1f1;
  43.   color: black;
  44.   cursor: pointer;
  45.   outline: dashed;
  46. }
  47.  
  48. .Boton-Grande
  49. {
  50.   -webkit-transition-duration: 0.3s; 
  51.   transition-duration: 0.3s;
  52.  
  53.   width: 100%;
  54.   padding: 12px 20px;
  55.   margin: 8px 0;
  56.   border: 1px solid #ccc;
  57.   box-sizing: border-box;
  58.   display: block;
  59.   margin-left: auto;
  60.   margin-right: auto;
  61.   background-color: blue;
  62.   color: white;
  63.  
  64.  
  65.  
  66. }
  67.  
  68.  
  69. .Boton-Grande:hover
  70. {
  71.   background-color: #a0a0a0;
  72.   color: #000000;
  73.   outline: dashed;
  74. }
  75.  
  76.  
  77. #usuario1:focus
  78. {
  79.  background-color: #f1fff1;
  80. }
  81.  
  82.  
  83. .asteriscos:focus
  84. {
  85.  background-color: #f1f1ff;
  86. }
  88.  
  89.  <script>window.onload=document.getElementById("usuario1").focus();</script>
  90.  
  91. </body>
  92. </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.

Título: Re: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: Leguim en 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 (http://codexexempla.org/articulos/2007/lanzar_funciones.php) así que hice como ellos me dijeron...

Código
  1.     window.addEventListener('load', function()
  2.     {
  3.     	form_index.input_email.focus();
  4.     }, false);
  5.  

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

Título: Re: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: @XSStringManolo en 18 Diciembre 2019, 23:06 pm
Lanzadera.. Lmao.

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

Título: Re: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: 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.

Título: Re: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: Leguim en 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...

Título: Re: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: WHK en 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.

Título: Re: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: Leguim en 19 Diciembre 2019, 15:24 pm
Es que no toque nada, y en otros navegadores sirve el foco... brujería xD

Título: Re: [Pregunta]: autofocus="true" ya no me funciona
Publicado por: @XSStringManolo en 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.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines