Как реализовать такой input="text"?

Question

[paralelogram]

Есть 1 input.
Можно как то сделать этот input таким:



Ну и подкрутить (не знаю как это называется) пишешь в 1 окошко, курсор перепрыгивает во второе и т.д.

Видел кто подобную реализацию?
Какой можно применить подход?

Comments

[automatik]

4 инпута, потом конкатенируешь да и делов.

Answer 1

[Сергей Горячев]

Если на 1 инпуте, то Maskedinput для "перепрыгивания", а сам input просто оформить фоновой картинкой.
Желательно использовать моноширинный шрифт.
Но лучше разбить на 4 инпута https://jsfiddle.net/webirus/vhsq6jah/

Comments

[Кирилл Несмеянов]

Картинкой такое оформлялось в 2000х годах. Не надо, пожалуйста, подсказывать, если не умеете:

input[type=text] {
  border: none;
  appearance: none;
  background: #ccc;
  color: #111;
  font-weight: bold;
  border-radius: 6px;
  padding: 0 15px;
  height: 24px;
  line-height: 24px;
}

[Froggyweb]

Кирилл Несмеянов: :) j о какой картинке речь?

Хотя Maskedinput так стилизовать ну задача не из простых

4 инпута, потом конкатенируешь да и делов.

:)

[Сергей Горячев]

Кирилл Несмеянов: Если ты не понял ответа, не комментируй.

[Сергей Горячев]

Froggyweb: стоит задача - 1 инпут. С 4-мя и проблемы не было бы)

[Сергей Горячев]

Froggyweb: Вот, нашел. https://jsfiddle.net/webirus/vhsq6jah/ как делал когда-то.

[paralelogram]

Спасибо

Answer 2

[Артем]

jsfiddle.net/2VETF/1
но там несколько инпутов
в одном инпуте сделать можно только как-то перекрыв стилями или маской