Как сделать такую маску?

Question

[Дмитрий Марков]

Нужно сделать маску для ввода 4х значного кода в input.
Я ограничил максимальное количество цифр в input и накидал стилей

<input class="input" type="number" maxlength="4" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">

.input {
  padding: 10px;
  border: 1px solid #D0D0D0;
  border-radius: 5px;
  font-family: monospace;
  width: calc(4*30px + 20px);
  font-size: 28px;
  line-height: 30px;
  letter-spacing: 15px;
  background: repeating-linear-gradient(to right, #D0D0D0 0 25px, transparent 0 30px) bottom/100% 1px content-box no-repeat;
  display: block;
  margin-bottom: 15px;
  box-sizing: border-box;
}
input[type=number] {
 -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Проблема появляется при вводе последнего символа
Как её исправить ?)
JSFiddle

Comments

[Алексей Ярков]

Проблема появляется при вводе последнего символа

А проблема секретная или можно её описать всё таки?

[Дмитрий Марков]

Алексей Ярков, Ну так как это воспроизводится за пол минуты я думал проще будет если вы сами её воспроизведёте.

[Алексей Ярков]

Дмитрий Марков,

Ну так как это воспроизводится за пол минуты

Да, воспроизводится, но в песочнице и Вами, а не нами ))
На будущее совет: сделайте сразу песочницу, быстрее ответят.

[Алексей Ярков]

Дмитрий Марков, ну и вопрос по-прежнему открыт. В чём ошибка? Что ИМЕННО не устраивает?

[Дмитрий Марков]

Алексей Ярков, Не устраивает что первой цифры не видно)))

[Алексей Ярков]

Дмитрий Марков,

Всё видно )

[Дмитрий Марков]

Алексей Ярков, Там мои ресеты не пременились ))Поменял код в задаче

[Дмитрий Марков]

Алексей Ярков, https://jsfiddle.net/EnTilza/z8mx3wro/1/

[Алексей Ярков]

Дмитрий Марков, Ну font-size: 24px; выставьте

[Дмитрий Марков]

Алексей Ярков, Это не по макету)

Answer 1

[Дмитрий Марков]

Придумал решение с использованием js. Нужно всего та после ввода 4той цифры перенести курсор в начало строки и снять фокус инпута. Изи.

const inputs = document.querySelectorAll('.input');


if( inputs.length ) {

    const inputSelection = input => {
        input.type = 'text';
        input.setSelectionRange(0,0);
        input.type = 'number';
        input.blur();
    }

    inputs.forEach(input => {
        input.addEventListener('input', event => {
            if( input.value.length == input.maxLength ) inputSelection(input);
    
            if( input.value.length > input.maxLength ) {
                input.value = input.value.slice(0, input.maxLength);
                inputSelection(input);
            }
        });
    });

}