YSR Keyed Entry a

by KelseyW

HTML

<div class="pbBody">

  <h4>Basic Information</h4>

  <div class="form-group">
    <label class="col-md-6 col-lg-6 control-label">
      Date of administration
    </label>
    <div class="col-md-4 col-lg-2">
      <div class="requiredInput">
        <div class="requiredBlock"></div>
        <span class="dateInput dateOnlyInput">
						<input class="form-control  input-sm" id="YSR_Page:DS_YSR:mainBlock:DOAYSR__c" name="YSR_Page:DS_YSR:mainBlock:DOAYSR__c" onfocus="DatePicker.pickDate(true, 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', false);" placeholder="MM/DD/YYYY" size="12"  type="text">
						<span class="dateFormat">[&nbsp;<a href="javascript:DatePicker.insertDate('2/1/2018', 'YSR_Page:DS_YSR:mainBlock:DOAYSR__c', true);">2/1/2018</a>&nbsp;]</span>
        </span>
      </div>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-6 col-lg-6 control-label">
      How was this form administered?
    </label>
    <div class="col-md-4 col-lg-2">
      <select id="YSR_Page:DS_YSR:mainBlock:YSRMETH__c" name="YSR_Page:DS_YSR:mainBlock:YSRMETH__c" class="form-control input-sm" size="1">
        <option value=""></option>
        <option value="0">Pen and paper only</option>
        <option value="1">Electronic only</option>
      </select>
    </div>
  </div>

  <h4>Question</h4>

  <div class="striped-question" id="questionRows">

    <div class="form-group ">
      <label class="col-md-12 col-lg-5 control-label">
        <span class="nmbr">1.</span> I act too young for my age&nbsp;&nbsp;
        <span id="YSR_Page:DS_YSR:mainBlock:qContent:0:j_id64" style="display: none;"></span>
      </label>
      <div class="col-md-12 col-lg-7" id="fieldset1">
        <span class="nmbr"></span>
        <fieldset style="border: none;">
          <table role="presentation" id="YSR_Page:DS_YSR:mainBlock:qContent:0:radioSelections" class="radio-list radio-list-inline">
            <tbody>
              <tr>
                <td>
                  <input...

CSS

.focusedRow {
  outline: 1px solid red;
}

.blue {
  background: blue;
}

.foci {
  background: yellow;
}

JavaScript

$(document).ready(function() {
  $(':input:first').focus();
  // $().keydown(function keyname(event) {
  document.addEventListener('keydown', (event) => {
    var keyName = event.key;
    console.log(keyName);
    return (keyName);
  });

  var focusedEle = document.activeElement;
  console.log(focusedEle);

  $(focusedEle).on('focus', function() {
    $(focusedEle).addClass("focusedRow");
    console.log(focusedEle);
  }).on('blur', function() {
    $(focusedEle).removeClass("focusedRow");
    console.log(focusedEle);

  });

  var questions = $('.form-group').length;
  console.log(questions);

  $.each($('fieldset'), function(index, fGroup) {
    // $.one($('fieldset'), function(index, fGroup) {
    console.log(index);
    console.log(fGroup);

    $(fGroup).focusin(function() {
      console.log(focusedEle);
      $(fGroup).addClass("blue");
    });
    $(fGroup).focusout(function() {
      console.log(focusedEle);
      $(fGroup).removeClass("blue");
    });


    $("input[type!='text']").keydown(function(event) {
      //var keyName = event.key;
      if (keyName === '0' || keyName === '1' || keyName === '2') {}
    });

  });
});