elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: Únete al Grupo Steam elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: autofocus="true" ya no me funciona		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: autofocus="true" ya no me funciona  (Leído 4,037 veces)
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
[Pregunta]: autofocus="true" ya no me funciona
« 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...



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.  
En línea
AlbertoBSD
Programador y
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.703


🏴 Libertad!!!!!


Ver Perfil WWW
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #1 en: 18 Diciembre 2019, 06:09 am »
Código
  1. document.getElementById("elemento").focus()
En línea
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #2 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.
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #3 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 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!
En línea
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #4 en: 18 Diciembre 2019, 23:06 pm »
Lanzadera.. Lmao.

Usa una función anónima. window.onload=function()
{
/* expresiones/llamadas separados por ; */
}
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.609


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #5 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.
En línea
- https://yhojann.cl/ - https://whk.cl/
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #6 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...
En línea
WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.609


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #7 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.
En línea
- https://yhojann.cl/ - https://whk.cl/
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #8 en: 19 Diciembre 2019, 15:24 pm »
Es que no toque nada, y en otros navegadores sirve el foco... brujería xD
En línea
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #9 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.
En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
"Call" no funciona con textbox pero, sí, con "cualquiertexto" « 1 2 »
Programación Visual Basic 		usuario oculto 12 6,980 Último mensaje 16 Julio 2011, 17:05 pm
por usuario oculto
GPA "GetProcAddress", "kernell32.dll" no me funciona
Ingeniería Inversa 		.:UND3R:. 2 2,424 Último mensaje 5 Septiembre 2011, 05:49 am
por .:UND3R:.
recursos visual basic, """"""proceso inmortal"""""
Análisis y Diseño de Malware 		Dark4ngel 7 14,864 Último mensaje 3 Noviembre 2011, 10:42 am
por Dark4ngel
Cómo funciona lo de "apuntar dominio", pero "por dentro"?
GNU/Linux 		ccrunch 7 7,126 Último mensaje 7 Diciembre 2014, 00:48 am
por MinusFour
China prohíbe pseudónimos "controvertidos" como "Obama" o "Putin" en internet
Noticias 		wolfbcn 0 8,882 Último mensaje 5 Febrero 2015, 14:58 pm
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines