ansaurus

Question

input focus weirdness when pressing tab key on a form where change handlers on select elements enable or disable inputs

Answer 1

+1 A:

I just tried your code, and managed to duplicate what you described. I tried to produce the desired behaviour by:

explicitly setting tabindexes for the drop-downs. (would be a good idea anyway)
closing your option tags (you really should be doing this)
enclosing your jQuery within a $(document).ready block. (you really should be doing this too)

None of the above did the trick, but here's a simple workaround to automatically focus the target element (tested in FF/Safari):

   $(document).ready(function() {
         $("#enabler").change(function() {
            $enabler = $(this);
            $("#target").attr("disabled", $enabler.val() == "0")
                        .focus();
        });
   });

karim79 2009-09-18 21:50:05

This code sample is a simple test case to show the problem without confusing people with too many irrelevant details. You were right that the tabindexes, closing tags, and $(document).ready did nothing to fix the problem.I tried your solution and it seemed to solve the problem, but now when I change the value with the mouse, the next input gets focused. Can I avoid this?I am trying to do something more general. I have a bunch of inputs in my form, some with more complex handlers. Is there any way to come up with a generic handler so when I push tab on any select, the next one gets focused?

mikez302 2009-09-18 22:33:53

Answer 2

+1 A:

My guess is that your problem is that due to differences in the sequence of events between browsers, the change event is getting fired after the focus has moved.

There are 4 events fired: keydown, keyup, keypress, and, change.

Let's say that the browser moves the focus when keypress occurs. Then it matters what the sequence looks like:

keydown
keyup
change [element is enabled/disabled]
keypress [focus moves]

Would work just fine. But if the sequence looks like this:

keydown
keyup
keypress [focus moves]
change [element is enabled/disabled]

Then the change event is occurring to late for the focus to take the state of the element into account.

You can log out the events to verify this:

$("#enabler").bind('change click keypress keydown keypress blur', function(e) {
   console.log( e.type );
});

The simplest solution would be to add the enable/disable handler to more events:

$("#enabler").bind('change click keypress', function() {
    $enabler = $(this);
    $("#target").attr("disabled", $enabler.val() == "0");
});

Borgar 2009-09-19 01:00:46

I tried your solution and it seemed to work well. I still had problems in Chrome, but I fixed them with a minor modification: I used "keydown" instead of "keypress".

mikez302 2009-09-21 17:18:52

Answer 3

A:

I figured it out. Here is how I did it:

$("#enabler").bind("change click keydown", function() {
    $enabler = $(this);
    $("#target").attr("disabled", $enabler.val() == "0");
});

This is Borgar's idea with a minor modification.

mikez302 2009-09-21 17:20:33

ansaurus

tags:

views:

answers:

input focus weirdness when pressing tab key on a form where change handlers on select elements enable or disable inputs

related questions