Имитация плиточного поля ввода
Я пытаюсь имитировать плавный плиточный ввод (отзывчивое поле ввода текста с квадратной плиткой для каждого символа). Пока что я получил довольно приличный результат, но есть пара проблем, которые я не могу полностью понять, и я подумал, может быть, кто-то здесь может предложить решение (или лучшее).
Вот мой код:
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
* { box-sizing: border-box; }
.tiled-input { position: relative; }
.tiles {
display: flex;
background: black;
padding: 0 0.2vw;
}
.tile {
display: inline-block;
background: white;
margin: 0.4vw 0.2vw;
flex: 1 0 auto;
}
.tile:before {
content: "";
display: block;
padding-bottom: 100%;
}
input {
display: block;
position: absolute;
background: transparent;
outline: none;
border: none;
width: 100%;
height: 100%;
top: 0;
font-family: "Source Code Pro";
text-transform: uppercase;
text-indent: 2vw;
font-size: 7.5vw;
letter-spacing: 0.5em;
}
<div class = "wrapper">
<div class = "tiled-input">
<div class = "tiles">
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
<div class = "tile"></div>
</div>
<input type = "text" maxlength = "12">
</div>
</div>Вопросы:
Я хотел бы улучшить (может быть, какое-нибудь выражение
calc()?) Значениеletter-spacing, чтобы символы всегда были центрированы по всей ширине. Прямо сейчас я получил его для больших устройств, но есть некоторые размеры, в которых буквы немного неуместны ...Мне нужно, чтобы было 12 плиток, но когда я ввожу последний символ, курсор перемещается в ожидании 13-го, и он сдвигает весь ввод, перемещая символы. Единственное решение, которое я мог придумать для этого, - это добавить
overflow: hiddenк.tiled-inputи сделатьinputпохожим наwidth: 120%, но мне нужен лучший подход.
Должен ли он быть только HTML / CSS или приемлем Javascript?
Спасибо @Phiter, я исследую подход с repeating-linear-gradient, но я предполагаю, что столкнусь с той же проблемой с letter-spacing, поскольку проблема заключается не в рисовании плиток, а в размещении символов.
У Криса Койера есть образец CodePen решения для этого типа подхода, основанного на фоне SVG для создания разделения строк: codepen.io/chriscoyier/pen/kKdCz
@ APAD1 JS может быть приемлемым, предпочтительнее только HTML / CSS
Спасибо @RobertC, я посмотрю
Ты прав @TemaniAfif, ссылок не нашел ...
вы хотите закрыть как дубликат? :) другой ответ вам подходит?
@TemaniAfif Я так думаю. Я попробую.
Я сейчас немного занят, но я пробовал кое-что, что вы можете использовать, что могло бы быть лучше. Вам придется повозиться с этим, но я думаю, что вы можете добиться желаемого поведения, используя
repeating-linear-gradient. См. Этот рабочий пример.