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;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" placeholder="this is not disabled!"> <br>
<input type="password" placeholder="this is not either!"> <br>
<input type="button" value="This is!" disabled="disabled"> <br>
<input type="submit" value="This is too!" disabled="disabled">

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.

Answer 2

It is better if we have some part of the code to understand better your problem.

For this:

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.

You must first handle an event for the first element and then in the callback function you need to enable/disable the second element, let say:

For enable:

$('#firstElement).on('click', function(){ $('#secondElement').removeAttr('disabled') })

For disable:

$('#firstElement).on('click', function(){ $('#secondElement').attr('disabled', 'disabled') })

Hope this could help.

Answer 3

Answer

To answer the question (as we already discussed in the comments), disabled elements can't be focused.

Workaround

For those looking for a workaround that gives a visual indication that an element is "disabled" and also prevents default functionality while still preserving focusability and click events, following is a simplified example where the submit button appears to be disabled and is prevented from "submitting" unless the input contains some text (also restores "disabled" state if input is cleared).

const input = document.querySelector('input');
const button = document.querySelector('button');

input.addEventListener('input', function(event) {
  let next = this.nextElementSibling;
  if (this.value) {
    next.classList.remove('disabled');
  } else {
    next.classList.add('disabled');
  }
});

button.addEventListener('click', function(event) {
  if (this.classList.contains('disabled')) {
    event.preventDefault();
    console.log('not submitted');
  } else {
    console.log('submitted');
  }
});

button {
  background-color: #fff;
  color: #0d47a1;
  border: 2px solid #0d47a1;
}

  button.disabled {
    background-color: #e0e0e0;
    color: #bdbdbd;
    border: 2px solid #bdbdbd;
    cursor: default;
  }
    
    button.disabled:focus {
      outline: none;
    }

<input type="text">
<button class="disabled">Submit</button>

Answer 4

You can use tabindex attribute in this case. Please refer below code, you need to update tabindex of disabled elements in a way that they get skipped when you press tab.

as per w3schools

The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <input class="input-1" tabindex="1" value="1">
    <input class="input-2" tabindex="2" value="2">
    <input type="button" onclick="changeTabIndex();" value="change-tab-index">
    <input class="input-3" tabindex="3" value="3">
    <input class="input-4" tabindex="4" value="4">
    <input class="input-5" tabindex="5" value="5">
    <script type="text/javascript">
    	function changeTabIndex() {
    		$(".input-5").attr("tabindex",4);
    		$(".input-4").attr("tabindex",5);
    	}
    </script>

Answer 5

On my idea a input event listener or change event listener for dropdown and input fields work better for your case. E.g:

$(document).on('input','input',function()
{
  $(this).next().prop('disabled',false);
}

or

$(document).on('change','input',function()
{
  $(this).next().prop('disabled',false);
}