Set focus on input using javascript or css on text input that is hidden until user selects an option-CodePudding

I am editing an existing form with inputs that are hidden until the user clicks on an option, and then text input will appear. I need to get that specific text input to have active focus once that happens. I would love to do this with CSS because I am not great with javascript, but here is a portion of that code:

if ($("#frmSubmittedValue").val() == '') {
  return false;
}

if ($("#frmSubmittedValue").val() == 'Individual')
  $("#personSubmittedByValue").val('');
  
if ($("#frmProjectSub").val() == 0) {
  return false;
}

Any help is greatly appreciated!

CodePudding user response：

Who's afraid of some javascript? I've thrown in a little extra method select()

function show_it() {
  document.querySelector("#f16").style.display = "block";
}

function focus_it() {
  document.querySelector("#f16").focus();
}

function select_it() {
  document.querySelector("#f16").select();
}

<button onclick="show_it(); focus_it(); select_it();">click</button>
<input id="f16" type="text" value="untitled" style="display:none">

CodePudding user response：

You can set focus with jQuery using the code below:

$( "#other" ).click(function() {
  $( "#target" ).focus();
});

There's a simple form example on the jQuery site here.

As for making the element visible, start off having the element you don't want shown to be display: none and has aria-hidden="true" (so screen-readers avoid) and a tabIndex="-1" (so the user can't tab to it). Then, using an if condition, set the properties to display: block, aria-hidden="false" and tabIndex="0".

I've put together a rough form with a few different input types. It's not perfect, but should give the general idea.

function makeMeVisible(id) {
  $(id).parent().removeClass('hidden').attr('aria-hidden', 'false').attr('tabIndex', '0');
}

function makeMeVanish(id) {
  $(id).parent().addClass('hidden').attr('aria-hidden', 'true').attr('tabIndex', '-1')
}

/* Select the first input and listen out for when it gets clicked */
$('#itemOne').on('click', function() {
  /* If we are checked, run the  makeMeVisible function and set focus to the next element we want shown */
  if( $(this).is(':checked') ) {
    makeMeVisible('#itemTwo');
    $('#itemTwo').focus();
  } else {
  /* If we're not, make the item vanish and set the focus back to the original element */
    makeMeVanish('#itemTwo');
    $('#itemOne').focus();
  }
})

/* Select elements need to listen for a change. When changes, get the selected option */
$('#itemTwo').on('change', function() {

/* Change what we do next based on what is chosen (looking at the value property) */
    switch($('#itemTwo option:selected').val()) {
    case "Value 1" :
      makeMeVanish('#itemFive');
      makeMeVisible('#itemFour');
      $('#itemFour').focus();
      break;
    case "Value 2" : 
      makeMeVanish('#itemFour');
      makeMeVisible('#itemFive');
      $('#itemFive').focus();
      break;
    default:
      /* If nothing is chosen, hide both */
      makeMeVanish('#itemFour');
      makeMeVanish('#itemFive');
      
  }
})

.form-item   .form-item {
  margin-top: 1rem;
}

.form-item {
  display: block;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div ><label><input type="checkbox" id="itemOne">Item one</label></div>
  <div  aria-hidden="true" tabIndex="-1">
    <label for="itemTwo">Item two</label>
    <select name="option" id="itemTwo">
      <option>Select</option>
      <option value="Value 1">Option one</option>
      <option value="Value 2">Option two</option>
    </select>
  </div>
  <div  aria-hidden="true" tabIndex="-1">
    <label for="itemThree">Item three</label>
    <input type="text" id="itemThree">
  </div>
  
  <div  aria-hidden="true" tabIndex="-1">
    <label for="itemFour">Item four (Option one)</label>
    <input type="text" id="itemFour">
  </div>
  
  <div  aria-hidden="true" tabIndex="-1">
    <label for="itemFive">Item five (Option two)</label>
    <input type="text" id="itemFive">
  </div>
</form>