EnterToTab Demo

Demo for EnterToTab lib

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script src="https://cdn.rawgit.com/sarmadaljazrawi/EnterToTab.js/master/EnterToTab.min.js"></script>
<section>
  <div id="dvForm1" class="container">
    <h1>Enter To Tab</h1>
    <fieldset>
      <legend>Form 1</legend>
      <div>
        <label for="tbFirstName">FirstName</label>
        <input id "tbFirstName" data-entertotab="true" type="text" />
      </div>
      <div>
        <label for="tbLastName">LastName</label>
        <input id "tbLastName" data-entertotab="true" type="text" />
      </div>
      <div>
        <label for="tbBirthdate">Birthdate (will not be tabbed on enter)</label>
        <input id "tbBirthdate" type="text" />
      </div>
      <div>
        <button type="button" data-entertotab="true">Save</button>
        <button type="button" data-entertotab="true">Cancel</button>
      </div>
    </fieldset>
  </div>
  <div id="dvForm2" class="container">
    <fieldset>
      <legend>Form 2</legend>
      <div>
        <label for="tbGender">Gender</label>
        <input id "tbGenderMale" name="tbGeneder" data-entertotab="true" type="checkbox" />Male
        <input id "tbGenderFemale" name="tbGender" data-entertotab="true" type="checkbox" />Female
      </div>
      <div>
        <label for="ddlYear"></label>
        <select id "ddlYear" data-entertotab="true">
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                        </select>
      </div>
      <div>
        <button type="button" data-entertotab="true">Save</button>
        <button type="button" data-entertotab="true">Cancel</button>
      </div>
    </fieldset>
  </div>
</section>

CSS

input:focus {
  background-color: rgb(252, 252, 159);
}

select:focus {
  background-color: rgb(252, 252, 159);
}

button:focus {
  background-color: rgb(252, 252, 159);
}

div {
  margin: 5px 5px 5px 5px;
}

.container {
  margin: 25px 10px 15px 10px;
}

JavaScript

$(function() {
          var form1 = new SA.EnterToTab();
          form1.AddHandler("[data-entertotab='true']", $("#dvForm1"));

          var form2 = new SA.EnterToTab();
          form2.AddHandler("[data-entertotab='true']", $("#dvForm2"));
        });