Cómo no perder el foco en una página de inicio de sesión

Tengo un formulario de inicio de sesión simple con 2 campos de entrada: "nombre de usuario" y "contraseña". El campo "nombre de usuario" está enfocado de manera predeterminada. El problema es que cuando el usuario hace clic fuera de los campos "nombre de usuario" o "contraseña", el foco se va (no está en los campos "nombre de usuario" ni en "contraseña"). ¿Cómo puedo forzar el foco en estos 2 campos? ? SóloCómo no perder el foco en una página de inicio de sesión

En mi caso, este es un comportamiento muy molesto, por lo que realmente quiere hacer esto :)

¿Puedo hacer algo como:?

$("*").focus(function() { 
    if (!$(this).hasClass("my_inputs_class")) { 
     // How to stop the focusing process here ? 
    } 
});

Fuente

2010-06-10 Misha Moroshko

+22

Eugh. Por favor, no intentes hacer esto. Si los usuarios quieren que el foco esté en otro lugar, déjelos en otro lugar. – Quentin

Tal vez este comportamiento de enfoque muy irritante es algo que se le pidió que hiciera, por lo que tiene poco poder para hacer lo contrario, pero piense: ¿Realmente vale la pena el problema? ¿Es útil? ¿Incluso es necesario? – Humberto

@Misha: ¡Bienvenido a programar una aplicación web! –

Parece que siempre quiere que una de sus entradas se concentre, es suficiente. La forma en que lo haría es vincular cada uno de los eventos de entradas blur() para que, si ocurriera, pase al siguiente elemento.

Aquí está el marcado:

<body> 
<form method="POST" action="."> 
    <input type="text" name="username" /> 
    <input type="password" name="password" /> 
    <input type="submit" name="submit" /> 
</form> 
</body>

Y aquí está el jQuery:

$(document).ready(function() { 
    // what are the named fields the user may focus on? 
    var allowed = ['username', 'password', 'submit']; 
    $.each(allowed, function(i, val) { 
     var next = (i + 1) % allowed.length; 
     $('input[name='+val+']').bind('blur', function(){ 
      $('input[name='+allowed[next]+']').focus(); 
     }); 
    }); 
    $('input[name='+allowed[0]+']').focus(); 
});

Fuente

2010-06-16 16:43:07 artlung

+1 para el concepto, pero el ejemplo de jQuery podría ser un poco menos complejo. - Código jQuery ligeramente más limpio en http://www.jsfiddle.net/bKuUV/2/ – gnarf

Además, nombrar/configurar el ID de un '' a 'submit' puede causar problemas con jQuery' .submit() ' función. http://dev.jquery.com/ticket/6264 – gnarf

No configuro el 'id' de la' entrada' para enviar, por lo que el ticket no es relevante. Mi ejemplo no usa 'id's en absoluto, simplemente no veo cómo son necesarios para responder la pregunta. Sin embargo, me gusta el uso de 'next()'. Además, no uso 'first()' mucho pero me gusta eso también. – artlung

Usted podría utilice javascript para establecer el foco en el enfoque, pero realmente shoudn't. Forzar el foco en esos campos rompería la interacción normal de la página. Significaría que un usuario no podría hacer algo tan simple como hacer clic en un enlace en la página, porque el foco siempre estaría en esas entradas.

Por favor, no lo haga :)

Fuente

2010-06-10 14:16:23

por favor vea mi pregunta actualizada –

Si realmente quieres hacer esto (y no debe) utilizar delegate() en lugar de establecer un controlador de eventos por separado sobre cada elemento HTML sencillo:

$('body').delegate('*', 'focus', function() { 
    if (!$(this).hasClass("my_inputs_class")) { 
    $('#username').focus(); 
    return false; 
    } 
});

Pero consideran que esto hará que unacessible todos los elementos excepto los dos campos de entrada a través de la navegación por teclado (incluyendo el botón de enviar, cualquier enlaces de la página, etc.)

Fuente

2010-06-13 15:14:20 Tgr

Establecer blur controlador de eventos por lo que trae de vuelta a un enfoque de tus entradas.

Fuente

2010-06-13 16:54:54 Thevs

Se podría hacer como esto (en pseudo código):

if user || pass blured 
    if user.len > 0 
     pass.setFocus 
    else 
     user.setFocus

Esperanza usted lo consigue.

Fuente

2010-06-14 10:16:00 hellozimi

No es lo suficientemente bueno porque si el usuario ingresa su nombre de usuario y contraseña, y luego quiere cambiar el nombre de usuario, no puede porque el foco estará en la contraseña. –

Instale un controlador onClick en el elemento body (o un div que cubra la mayor parte de la página). Al hacer clic en el div, debe establecer el foco en el campo de nombre de usuario/contraseña.

también sugieren para unir Volver en el "nombre de usuario" y al Volver en el campo "contraseña" para "Envíe el formulario de" "se centran en la contraseña Ajuste".

Fuente

2010-06-15 11:26:29

podría permitir el clic en los enlaces de volver a centrarse en usted entradas después de un intervalo de tiempo mínimo.

Cada vez que un objeto gana el foco, comprueba si tiene la clase requerida: si no establece el foco en la primera de las entradas del formulario; de esta manera:

<html> 
<head> 
<title>Example</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" /> 
    <script type="text/javascript" > 
    $(function() { 
    $('*').focus(function() { var obj = this; setTimeout(function() {checkFocus(obj)}, 1)}); 
    }) 

    function checkFocus(obj) { 
     if (!$(obj).hasClass('force_focus')){ 
      $('input.force_focus:first').focus() 
     } 
    } 
    </script> 
</head> 
<body> 
    <a href="http://www.google.com">Extrnal link</a> 
    <form><div> 
User: <input type="text" name="user" class="force_focus"/><br/> 
Password: <input type="password" name="password" class="force_focus"/><br/> 
Other: <input type="text" name="other" class=""/><br/> 
<input type="submit" name="submit" value="Login" /> 
</div></form> 
</body> 
</html>

Fuente

2010-06-16 17:33:10 Iacopo

esto es sólo una idea, se puede utilizar una función setInterval para poner el foco en el campo nombre de usuario, y se puede interrumpir cuando lo desee con la función clearInterval.

var A = setInterval(function(){ $('#username').focus();}, 100);

... y para interrumpt ella, puede hacer algo como esto

$('#password').focus(function(){ clearInterval(A);});

Fuente

2010-06-17 02:14:40 eos87

Cómo no perder el foco en una página de inicio de sesión

Respuesta

Cuestiones relacionadas