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

Question

He visto preguntas similares sobre So, incluyendo Éste, que es viejo. Leí y seguí los enlaces, pero no está claro si hay una solución adecuada para este problema hoy.

Mi problema inferior es que estoy usando html placeholder="..." en los campos de entrada. Al centrarse 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

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

Answer 2

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

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

Answer 3

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

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

No hay necesidad de JavaScript y mantiene el pedido de pestañas si desea usar la tecla Tab para moverse a través de los campos.

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

Answer 4

Terminé haciendo esto:

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

Answer 5

Puedes usar jQuery:

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

Esto si le resulta difícil rastrear el error por qué el enfoque automático se establece en su primer campo de entrada del formulario. Asegúrese de insertar este código antes del cierre </body> Etiqueta corporal de su documento.

Answer 6

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

1. Eliminar todo el contorno de Focus

   :focus {
       outline: 0;
   }
   

2. Agregue el esquema del nuevo enfoque

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