Tutorial Membuat Auto Tab Pada Input Text Field

thumbnail

Kali ini saya akan sharing mengenai tutorial membuat auto tab pada input text field. Auto tab dapat digunakan saat kamu mebuat web site yang berisi PIN, nomor telepon/handphone, nomor identitas, dll. Disini saya akan membuat tiga file utama yaitu html, css, dan js.

1. File HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
  <div class="number-field">
    <input class="number-input" name="number-input" type="tel" size="1" maxlength="1" placeholder="1" autofocus="autofocus">
    <input class="number-input" name="number-input" type="tel" size="1" maxlength="1" placeholder="2">
    <input class="number-input" name="number-input" type="tel" size="1" maxlength="1" placeholder="3">-
    <input class="number-input" name="number-input" type="tel" size="1" maxlength="1" placeholder="4">
    <input class="number-input" name="number-input" type="tel" size="1" maxlength="1" placeholder="5">
    <input class="number-input" name="number-input" type="tel" size="1" maxlength="1" placeholder="6"> -
    <input class="number-input" name="number-input" type="tel" size="1" maxlength="1" placeholder="7">
    <input class="number-input" name="number-input" type="tel" size="1" maxlength="1" placeholder="8">
    <input class="number-input" name="number-input" type="tel" size="1" maxlength="1" placeholder="9">
</body>

2. File CSS

.number-field {
  margin: 50px;
  font-size: 20px;
}

.number-input {
  width: 13px;
  text-align: center;
  font-size: 16px !important;
  height: 1.75em;
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 2px solid #000;
  margin-right: 2px;
  margin-left: 2px;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.0s ease;
  opacity: 0;
}

3. File JS

  $(document).ready(function(){
    
    $('body').on('keyup', 'input.number-input', function()
    {
      var key = event.keyCode || event.charCode;
      var inputs = $('input.number-input');
      if(($(this).val().length === this.size) &amp;&amp; key != 32) 
      {
        inputs.eq(inputs.index(this) + 1).focus();  
      } 
      if( key == 8 || key == 46 )
      {
        var indexNum = inputs.index(this);
        if(indexNum != 0)
        {
        inputs.eq(inputs.index(this) - 1).val('').focus();
        }
      }
      
    });
  });

4. Screenshot Hasil

Hasil Pada Wesbite
Back To Top