Javascript 在输入字段中为每个字母分别设置方框

我是说这些；我想模仿一种真实的形式，但我不知道该怎么做。。我知道这在普通html中是不可能的，可能需要一些javascript/jquery；我们也非常感谢您在线提供此表单的示例

---

你需要JSL和jquery或任何其他js库

为每个输入设置onkeyup事件。如果输入的字符正确，则防止空格并聚焦下一个同级。这将防止在每个框中输入超过1个字符

onfocus选择输入中的文本不要让用户附加到现有文本，它应该被覆盖。

是一个JavaScript库，它提供的功能与您正在寻找的功能非常相似

另一方面，如果您希望实现自己的解决方案，我会这样做：

1抓取要装箱的段落

2对于目标段落的每个字母，创建一个新的输入元素，该元素具有唯一的ID和标记其替换字母的属性。使用css进行样式设置，直到满意为止

3将事件监听器keyup/keypress附加到以类名区分的方式创建的每个输入

4验证后，通过选项卡索引排序或手动将焦点转移到下一个输入字段，转到具有相同类名的下一个输入字段。

您可以通过在每个输入上使用按键事件来完成，如下所示：

$(document).ready(function () 
{
    $('.letter').keypress(function ()
    {
        $(this).next().focus();
    });
});

---

看看这个。它也需要一些验证，但我想主要的想法是清楚的。

我认为你不需要任何js来实现这一点。您只需要：

盒子的图像 等距字体 有些人玩弄css值 一些幻想 请参见应用于输入字段的CSS：

#text{
    background-image: url("square.gif");    
    width: 195px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 12px;
}

这里举一个例子：

---

可以使用输入标记的maxlength属性

<input type="text" name="usrname" maxlength="1">

---

更改css以调整输入宽度。

css是您的朋友-最好从一开始就开始学习。在这种情况下，我看不出css有什么帮助；如果你说的是重复图像作为背景，那不是我的意思：\mable duplicate:你的意思是你需要每个字母都在一个单独的输入字段中，或者看起来像是这样？它可能看起来只是“框化”了，但“约束”文本框可能需要正确的字距调整？抱歉。进行了编辑。这很好，但是我想将字符数限制为6个。当用户键入第6个字符时，会出现第7个框，但不会进行任何输入。我怎样才能保证这不会发生？嗨，Zain，我真的不太明白你到底想要实现什么，你能说得更清楚一点吗？也许可以重新措辞你的问题或发布一个JSFIDLE链接？我昨天发布了一个问题，可能对你来说是一个很好的读物，你能做出回应吗？那么输入的宽度是动态的？谢谢