Home/ Questions/Q 378691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T14:49:09+00:00

I have a form with some select elements. One of them is configured so

  • 0

I have a form with some select elements. One of them is configured so that if the user changes the value, the next input may get enabled or disabled, depending on the value. When changing the value with the mouse, everything works fine. However, when using the keyboard, strange things happen. It acts differently from one browser to another.

In Firefox, if I change the value to enable the next input, then press the tab key, the focus skips the input that was just enabled. I can focus it by pressing shift+tab, but I think that may be annoying and confusing to users.

In Chrome, if I change the value to enable the next input, then press tab, the focus jumps like in Firefox. If I change the value to disable the next input, then press tab, the next input gets focused despite being disabled. This is strange, but not a big deal because the user can press tab again and focus the input after it.

In Internet Explorer, something very strange happens: everything works fine! If I change the value to enable the next input, then press tab, the next input gets focused. If I change the value to disable the next input, then press tab, the focus skips the disabled input. It works in IE 6, 7, and 8.

I am doing the enabling and disabling with jQuery. I haven’t had a chance to test it with plain Javascript so far.

You can test this issue with the following page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>select focus test</title>
</head>
<body>
<select id="enabler">
    <option value="0" selected>Disabled
    <option value="1">Enabled
</select>
<select id="target" disabled>
    <option value="a">a
    <option value="b">b
</select>
<select id="next">
    <option value="x">x
    <option value="y">y
</select>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("#enabler").change(function() {
    $enabler = $(this);
    $("#target").attr("disabled", $enabler.val() == "0");
});
</script>
</body></html>

If you change the value of the first dropdown, then press tab, you can see the behavior.

Here is my question: Is there any way to make the form act in all browsers like it does in IE?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0