html - 如何为 CSS 中输入文本的最后一个字符设置样式？

Question

我有以下代码段，其中样式一个输入文本元素如下:

每个写入的char 都会被放入一个特殊的方框内。 问题 是当我写最后一个字符时(当达到 maxlength 属性时)出现了一个奇怪的行为。文本只是向左移动了一些像素。

可以在此处观察到该行为:

#text{
    background-image: url("https://png.pngtree.com/element_origin_min_pic/29/03/20/1656fa8074e9571.jpg");
    width: 255px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 13px;
}

<br>Cnp: <input type="text" maxlength="13" id="text"/> </br>

提前致谢。

Answer 1

那是因为你的字母比它们实际的“宽”，因为字母间距。要摆脱这种(默认)行为，您需要添加一些 javascript 以在插入后将元素 scrollLeft 重置为 0。

现在我只是通过 html onkeyup 和 onchange 添加了这些处理程序，正如您所看到的那样有效。

#text{
    background-image: url("https://png.pngtree.com/element_origin_min_pic/29/03/20/1656fa8074e9571.jpg");
    width: 255px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 13px;
}

<br>Cnp: <input type="text" maxlength="13" id="text" onkeyup="this.scrollLeft = 0;" onchange="this.scrollLeft = 0;" /> </br>