CODEWITHSUNDEEP
javascripthtml
tjg92
tjg92

Reputation: 197

Event Control with KeyPress 'Tab'

So I have several input forms that are disabled until they are filled out in sequence because of data calls to the server based on their selections. I have a custom dropdown that allows me to do a typeahead and click the item I want. When I click the item, the field unlocks with a combination of onblur and onchange events that take place for my data model. The issue that comes into play for me is I want the user to be able to tab. But when I hit tab, the onblur and onchange haven't disabled the field so it skips several fields that it shouldn't. Is there any suggestions on preventing a tab keypress skipping the disabled element? Can I tab and focus on a disabled element?

Upvotes: 0

Views: 100

Answers (3)

tjg92
tjg92

Reputation: 197

I ended up switching it to a readonly property. The readonly allowed me to tab to it and focus on it while not being able to type in it until the the blur and change completed.

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

Assuming you are willing to temporarily enable the disabled element (thus making it writable), this can be done by checking whether the next element has the disabled attribute with hasAttribute(). If it does, you can change this attribute to false before the keydown returns true, and thus the keyup will tab to the disabled element.

Additionally, you can set a new attribute wasDisabled, which you can then check against with $(this)[0]. If the element has this class, you can re-disable the element once you tab off it again.

This can be seen in the following jQuery example:

$('input').on('keydown', function(e) {
  if (e.keyCode == 9) {
    if ($(this).next()[0].hasAttribute('disabled')) {
      $(this).next().attr('disabled', false);
      $(this).next().attr('wasdisabled', true);
    }
    if ($(this)[0].hasAttribute('wasdisabled')) {
      $(this).attr('disabled', true);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input>
<input disabled>
<input>

Hope this helps! :)

Upvotes: 0

Martin Ad&#225;mek
Martin Ad&#225;mek

Reputation: 18389

That is not possible, as the docs say:

A form control is disabled if its disabled attribute is set, or if it is a descendant of a fieldset element whose disabled attribute is set and is not a descendant of that fieldset element's first legend element child, if any.

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

So you can not click on those elements, and you can not focus element, that can not be clicked.

https://www.w3.org/TR/html5/forms.html#concept-fe-disabled

So the only option if you need to allow focusing of those elements is not to use disabled attribute at all. You could use .disabled class instead and bind on key events to suppress editing of the value.

Upvotes: 2

Related Questions