Pin

by Abner Rodrigues

HTML

<div class="container">
  <div class="wrapper-container">
    <p>
      Digite o PIN
    </p>

    <div class="wrapper-pin">
      <input id="n1" maxlength="1" type="text" class="pin" tabIndex="1" />
      <input id="n2" maxlength="1" type="text" class="pin" tabIndex="2" />
      <input id="n3" maxlength="1" type="text" class="pin" tabIndex="3" />
      <input id="n4" maxlength="1" type="text" class="pin" tabIndex="4" />
      <input id="n5" maxlength="1" type="text" class="pin" tabIndex="5" />
      <input id="n6" maxlength="1" type="text" class="pin" tabIndex="6" />
    </div>

    <button>
      Enviar
    </button>

  </div>

</div>

CSS

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  height: 100vh;
  color: #fff;
  background: #12141d;
}

.wrapper-container {
   background: #292b34;
    width: 100%;
    padding: 2em;
}

.wrapper-pin {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.pin {
  width: 33.66px;
  min-height: 36px;
  text-align: center;
  outline: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #666;
  margin-right: 5px;
}

button {
  margin-top: 2em;
  background: #3c5ccf;
  color: #fff;
  padding: 10px;
  width: 150px;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
}

JavaScript

const allPins = Array.from(document.getElementsByClassName("pin"));

allPins.map((item, index) => {
  item.addEventListener("click", function(evt) {
    item.select();
  });

  item.addEventListener("input", function(evt) {
    if (evt.data && evt.data.length >= 1) {
      const nextPin = allPins[index + 1];
      if (nextPin) nextPin.focus();
    }
  });

  item.onkeydown = function() {
    const key = event.keyCode || event.charCode;
    if (key == 8) {
      const value = event.target.value.length;
      if (value <= 0) {
        const previousPin = allPins[index - 1];
        if (previousPin) previousPin.focus();
      }
    }
  };
});