Link to home
Start Free TrialLog in
Avatar of pmessana

asked on

Tab Stop on Disabled Text Boxes

I have a disabled text box on a page, when the user enters in a qty in a different text box it validates the quantity and then enables the other text box.  I set the tab-stops on the page but they are not respected when the text box is disabled and then enabled through Javascript.  I can tab through the entire page and the second time around it will work but not on the first press of tab.

Attaching a snippet of the code that enables the text box and of the text box that is originally disabled with the tab stop set.

A couple of things i have tried to circumvent this.  First I attempted to not disable the text box inside the box itself, instead I disabled it at the end of the page load in hopes that the Tab index would be set up while the page loads and then field would become disabled.  This did nothing.

The second thing I attempted was to enable the text box and set the focus to go to that box, that also did not work.

It appears as though setting a text box to disabled initially or disabling the text box will render it unusable from Javascript or I haven't found a good way to control it.

Any good ideas here?

This is in my if condition and works, it enables the text box:
This is the Text Box that is initially disabled:
<input type="text" name="initials" style="width:40px" disabled="disabled" onBlur="checkInitials();" onMouseMove="checkInitials();" tabindex="10">

Open in new window

Avatar of LordOfPorts
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of pmessana


Interesting, I first read your response and thought that you had no idea what I was asking as I used the onChange and the onBlur to check the quantity.  Before I said you were nuts I decided to replace it with the onKeyUp and sure enough it worked.

Curious though, why does the onKeyUp behave differently than the onBlur and onChange?  Any ideas?
It is a timing issue, onkeyup will be called as soon as a value is entered into the input element which gives you time to check if a criteria is met and execute code prior to leaving the input element. onchange and onblur are called after the input element has lost focus so by the time you enabled the other text field the tab already took place and skipped the previously disabled text field.
Got it now, thanks for the help.