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

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  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 984 veces)
MiguelCanellas


Desconectado Desconectado

Mensajes: 638



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.544


🏴 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

Donaciones
1ABSD1rMTmNZHJrJP8AJhDNG1XbQjWcRz7
@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.233


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

MiguelCanellas


Desconectado Desconectado

Mensajes: 638



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
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.233


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

WHK
CoAdmin
***
Desconectado Desconectado

Mensajes: 6.345


The Hacktivism is not a crime


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

Telegram: @WHK102 - Semáforo Epidemiologico Chile
MiguelCanellas


Desconectado Desconectado

Mensajes: 638



Ver Perfil
Re: [Pregunta]: autofocus="true" ya no me funciona
« Respuesta #6 en: 19 Diciembre 2019, 07:53 am »

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
CoAdmin
***
Desconectado Desconectado

Mensajes: 6.345


The Hacktivism is not a crime


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

Telegram: @WHK102 - Semáforo Epidemiologico Chile
MiguelCanellas


Desconectado Desconectado

Mensajes: 638



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
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.233


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 »

Es que no toque nada, y en otros navegadores sirve el foco... brujería xD
Lo tienen mal implementado en Chrome.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

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