Question

我试图模拟流畅的平铺输入（响应式文本输入字段，每个字符都有一个方形图块）。到目前为止，我得到了相当不错的结果，但有一些问题我无法完全理解，我想也许有人可能会提出一个解决方案（或更好的解决方案）。

这是我的代码：

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

的问题：

我想改进（可能是某些calc()表达式？）letter-spacing值，以确保字符始终以所有宽度为中心。现在我把它用于大型设备，但是有些尺寸的字母略微放错了......
我需要它有12个图块，但是当我输入最后一个字符时，光标移动到等待第13个，它会移动整个输入，取代字符。我能想到的唯一解决方案是将overflow: hidden添加到.tiled-input并将input设为width: 120%，但我想要更好的方法。

模拟平铺输入字段

0 个答案: