ansaurus

Question

Answer 1

+7 A:

You could use javascript to set the focus on focusout, but you really shoudn't. Forcing focus on those fields would break the normal interaction of the page. It would mean a user couldn't do something as simple as clicking on a link on the page, because focus would always be on those inputs.

Please don't do it :)

Bala Clark 2010-06-10 14:16:23

please see my updated question

Misha Moroshko 2010-06-10 14:57:22

Answer 2

+2 A:

If you really really want to do this (and you shouldn't) use delegate() instead of setting a separate event handler on every single HTML element:

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

But consider that this will make unacessible all elements except the two input fields via keyboard navigation (including the submit button, any links on the page etc.)

Tgr 2010-06-13 15:14:20

Answer 3

A:

Set blur event handler so it brings back focus to one of your inputs.

Thevs 2010-06-13 16:54:54

Answer 4

A:

You could do like this (in psuedo code):

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

Hope you get it.

hellozimi 2010-06-14 10:16:00

It's not good enough because if user enters username and password, and then he wants to change the username, he can't because the focus will be on the password.

Misha Moroshko 2010-06-14 12:18:51

Answer 5

A:

Install an onClick handler on the body element (or a div that covers most of the page). Clicking on the div should then set the focus on the username/password field.

I also suggest to bind Return in the "username" to "Set focus on password" and Return in the "password" field to "Submit form".

Aaron Digulla 2010-06-15 11:26:29

Answer 6

+7 A:

It sounds like you always want one of your inputs to be focused, fair enough. The way I would do this is to bind each of your inputs blur() events so that if it occurs, it goes to the next element.

Here's the markup:

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

And here's the 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();
});

artlung 2010-06-16 16:43:07

+1 for the concept, but the jQuery example could be a little less complex. -- Slightly cleaner jQuery code at http://www.jsfiddle.net/bKuUV/2/

gnarf 2010-06-16 17:07:15

Also, naming / setting the ID of a `<input>` to `submit` can cause issues with the jQuery `.submit()` function. http://dev.jquery.com/ticket/6264

gnarf 2010-06-16 17:11:25

I don't set the `id` of the `input` to submit, so the ticket is not relevant. My example doesn't use `id`s at all, I just don't see how they're necessary to answering the question. I like your use of `next()` though. Also, I don't use `first()` very much but I like that too.

artlung 2010-06-16 17:18:33

Oh - And I solved the shift+tab issue with a little `setTimeout` -- http://www.jsfiddle.net/bKuUV/3/ -- feel free to edit in my examples if you want to use them...

gnarf 2010-06-16 17:25:18

@artlung - The same bug occurs with `<input name="submit">` as well as `<input id="submit">` -- http://www.jsfiddle.net/SLAAc/

gnarf 2010-06-16 17:39:15

Answer 7

A:

You could enable the click on links by re-focusing on you inputs after a minimum time interval.

Every time an object gains the focus you check if it has the required class: if not set the focus to the first of the form inputs; this way:

<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"&gt;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>

Iacopo 2010-06-16 17:33:10

Answer 8

A:

this is only an idea, you can use a setInterval function to put the focus in the username field, and you can interrupt it when you want with clearInterval function.

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

... and for interrumpt it, you can do something like this

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

eos87 2010-06-17 02:14:40

ansaurus

tags:

views:

answers:

How not to lose focus on a login page

related questions