Tab on disabled input

Question

I am implementing progressive UI disclosure pattern in my application. Using which I am disabling the next elements. So based on input of one element the next element is enabled

Answer 1

You could add an event listener to the keydown event and listen for the tab key like in the code snippet,

document.addEventListener("keydown", keyDown);

function keyDown(e) {
  switch (e.which) {
    case 9:
      var focused = $(document.activeElement);
      var all_inputs = $("input");
      var disabled_inputs = $("input[disabled='disabled']");
      var diff = all_inputs.length - disabled_inputs.length;
      var index = all_inputs.index(focused);
      if (index == diff - 1 && index != -1 && disabled_inputs.length > 0) {
        $(disabled_inputs[0]).removeAttr("disabled").focus();
        e.preventDefault();
      }
      break;
  }
}

This will enable the element as you tab onto it. It doesn't effect normal behavior otherwise. I am assuming you don't want to re-disable the element after the focus leaves.