<h1>CLUE:</h1>
<h2> ...and Stripes</h2>
<div class="clue-box">
  <input data-input="1" type=" text" class="clue-box__item" type="text" minlength="1" maxlength="1"><button data-target="[data-input='1']" data-hint="S">Hint</button>
  <input data-input="2" type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
  <button data-target="[data-input='2']" data-hint="T">Hint</button>
  <input data-target="" data-input="3" type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
  <button data-target="[data-input='3']" data-hint="A">Hint</button>
  <input data-input="4" type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
  <button data-target="[data-input='4']" data-hint="R">Hint</button>
  <input data-input="5" type="text" class="clue-box__item" type="text" minlength="1" maxlength="1">
  <button data-target="[data-input='5']" data-hint="S">Hint</button>
</div>
<p>Use Backspace to delete each letter in turn.</p>
.clue-box {
  display: flex;
  position: relative;
}
.clue-box__item {
  width: 35px;
  height: 35px;
  border: 1px solid #000;
  margin: 0 -1px 0 0;
  text-align: center;
  flex: 0 0 35px;
  min-width: 0; /* default is now auto which in Firefox would make the element larger than 35px*/
}
.clue-box__item:focus {
  background: yellow;
}

.clue-box button {
  position: absolute;
  top: 100%;
  width: 35px;
  height: 35px;
  border: 1px solid #ccc;
  margin: 2px 0 0 2px;
  cursor: pointer;
  opacity: 0;
}
.clue-box__item:focus + button {
  opacity: 1;
}
[data-input="2"] + button {
  left: 41px;
}
[data-input="3"] + button {
  left: 81px;
}
[data-input="4"] + button {
  left: 121px;
}
[data-input="5"] + button {
  left: 161px;
}
(function (d) {
  "use strict";
  //hint section
  const hints = d.querySelectorAll(".clue-box button");

  for (let j = 0; j < hints.length; j++) {
    hints[j].addEventListener("click", () => {
      var hintTarget = hints[j].getAttribute("data-target");
      var hint = hints[j].getAttribute("data-hint");
      d.querySelector(hintTarget).value = hint;
      d.querySelector(hintTarget).focus();
    });
  }

  // end hint section

  const input = d.querySelectorAll(".clue-box__item");

  for (let i = 0; i < input.length - 1; i++) {
    input[i].addEventListener("input", () => {
      if (input[i].value.length === input[i].maxLength) {
        input[i + 1].focus();
      }
    });
  }
  d.onkeydown = function (event) {
    //check if the input was the target otherwise exit
    const result = event.target.hasAttribute("data-input");
    if (result === false) {
      return;
    }
    switch (event.keyCode) {
      case 37:
        //Left arrow pressed
        //moveInput(-1);
        break;
      case 39:
        //Right arrow pressed
        //moveInput(1);
        break;
      case 8:
        //backspace key pressed
        moveBackSpace(-1);
        break;
    }

    function moveInput(direction) {
      var dataInput =
        parseInt(event.target.getAttribute("data-input")) + direction;
      if (dataInput > 0 && dataInput < 6) {
        d.querySelector('[data-input="' + dataInput + '"]').focus();
      }
    }

    function moveBackSpace(direction) {
      var backSpace =
        parseInt(event.target.getAttribute("data-input")) + direction;

      if (backSpace > 0 && backSpace < 6) {
        if (event.target.value === "") {
          //event.preventDefault();
          d.querySelector('[data-input="' + backSpace + '"]').focus();
          event.target.value = "";
        }
      }
    }
  };
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.