Placeholder исчезающий по мере ввода значения

Question

Состояние инпута по умолчанию – шесть плейсхолдеров-крестов:

Когда пользователь вводит цифры, они заполняют плейсхолдеры:

Как реализовать подобное поведение?

label {
  position: relative;
}

input {
  color: #1A1A1A;
  border: 1px solid #292929;
  border-radius: 8px;
  background: transparent;
}

span {
  color: #C1D1D9;
}

.numbers-block {
  position: absolute;
  width: 352px;
  height: 72px;
  padding: 10px 56px;
  box-sizing: border-box;
  font-size: 45px;
  line-height: 52px;
  letter-spacing: 16px;
  z-index: 1;
}

<form action="">
  <label for="">
    <span class="numbers-block">XXXXXX</span>
    <input class="numbers-block" type="text" maxlength="6" />
  </label>
</form>

https://codepen.io/Raneto4ka/pen/dyVRKer

Answer 1

Можно так:

const form = document.querySelector('form');

for(let inp of form.children) {
    inp.onkeyup = function() {
        if(inp.nextElementSibling) {
            inp.nextElementSibling.focus();
        }
    }
}

form{
  display: flex;
  justify-content:space-evenly;
  width: 150px;
  border:2px solid black;
  border-radius:5px;
}

input{
  width: 15px;
  height: 30px;
  text-align:center;
  border:none;
  font-size: 20px;
  font-weight: bold;
}
input:focus-visible{
  outline:none;
}
input::placeholder{
  font-weight:normal;
}

<form>
    <input type="text" placeholder="x" maxlength="1"/> 
    <input type="text" placeholder="x" maxlength="1"/> 
    <input type="text" placeholder="x" maxlength="1"/> 
    <input type="text" placeholder="x" maxlength="1"/>
    <input type="text" placeholder="x" maxlength="1"/> 
    <input type="text" placeholder="x" maxlength="1"/> 
</form>

Answer 2

Если для начала привести вёрстку и стили в порядок, то всё становится просто и очевидно:

let input = document.querySelector('input.numbers-block');
input.addEventListener('input', function() {
  this.previousElementSibling.textContent = this.value.padEnd(6, 'X');
});

label {
  position: relative;
  display: inline-block;
  width: 352px;
  height: 72px;
  border: 1px solid #292929;
  border-radius: 8px;
  overflow: hidden;
}

.numbers-block {
  display: inline-block;
  width: 100%;
  padding: 10px 0.5em 10px 1em;
  box-sizing: border-box;
  font: bold 45px/52px monospace;
  letter-spacing: 0.5em;
}

span {
  position: absolute;
  z-index: -1;
  color: #c1d1d9;
}

input {
  color: #1a1a1a;
  background: transparent;
  border: none;
}

<form action="">
  <label for="">
    <span class="numbers-block">XXXXXX</span>
    <input class="numbers-block" type="text" maxlength="6" />
  </label>
</form>

БЛОГ НА HUSL

Placeholder исчезающий по мере ввода значения

Ответы (2 шт):