jquery - por - propiedad autofocus html

¿Cómo evitar el enfoque automático en el primer campo de entrada al abrir un formulario HTML como un diálogo JQuery?

Question

He visto preguntas similares sobre SO, incluida esta , que es antigua. Leí y seguí los enlaces, pero no está claro si existe una solución adecuada para este problema hoy.

Mi problema final es que estoy usando el placeholder="..." de placeholder="..." de HTML placeholder="..." en los campos de entrada. Al enfocarse automáticamente en el primer campo, su marcador de posición ya no es visible para el usuario.

EDITAR

Aquí está mi código HTML:

<div id=''LOGIN_FORM'' title="Login">
    <form action="">
        <input type="text" name="login_id" required="required"
                           placeholder="Enter user ID" /><br />
        <input type="password" name="login_pwd" required="required"
                           placeholder="Enter password" /><br />
    </form>
</div>

Aquí está mi código JS:

$("#login").click(function() { 
    $("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
    {
            text: "Ok",
            click: function() { $(this).dialog("close"); }
        }
    ] });
});

Answer 1

Agregar esta etiqueta como primer campo de entrada en la página funciona para mí.

<input type="text" autofocus="autofocus" style="display:none" />

No necesita javascript y mantiene el orden de las pestañas si desea utilizar la tecla de tabulación para moverse por los campos.

(Probado en Chrome> 65, Firefox> 59 y Edge)

Answer 2

Lo que hice fue crear una entrada adicional y hacerla invisible ( style="display:none" ) y luego le asigné la propiedad autofocus="true" Ponga esto al final del contenido de su cuadro de diálogo para que no se meta con nada. Debe tener un aspecto como este:

        <div><!--dialog div-->
           <button></button>
           <button></button> 
          <input type="hidden" autofocus="true" />
        </div>

Answer 3

Puedes usar jquery:

jQuery(document).ready(function(e) {
   $(''input[name="login_id"]'').blur(); 
});

Esto si le resulta difícil rastrear el error por el cual el autofocus se establece en su primer campo de entrada del formulario. Asegúrese de insertar este código antes del cierre </body> la etiqueta del cuerpo de su documento.

Answer 4

Sin JQuery y JavaScript, podemos ofrecer una solución solo para CSS.

1. eliminar todo el contorno del enfoque

   :focus {
       outline: 0;
   }

2. añadir el nuevo esquema de enfoque

   :link:focus, :visited:focus {
       outline: none;
   }

Answer 5

Terminé haciendo esto:

<input type="text" style="position: fixed; left: -10000000px;" disabled/>

Answer 6

Una solución es establecer tabindex="-1" en TODOS los campos de entrada para mantener visibles los marcadores de posición HTML.