输入字段中每个字母的单独框

Question

我的意思是boxes;我想模仿一个真实的形式，但我不知道如何去做...我知道这是不可能的正常的HTML，可能需要一些javascript / jquery;在线表格的一个例子也很受欢迎！

Answer 1

我认为你不需要任何js。你只需要：

• 盒子的图像
• 等宽字体
• 有些人玩css值
• Some Phantasy

请参阅此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;
}

这里有一个例子：

http://jsfiddle.net/w564j/

Answer 2

lettering.js（wiki）是一个JavaScript库，提供与您正在寻找的功能非常相似的功能。

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

1）抓住你想要“加密”的段落

2）对于目标段落的每个字母，创建一个具有唯一ID的新输入元素，以及标记它所替换的字母的属性。用css打造它直到满意为止。

3）将事件监听器（keyup / keypress）附加到以这种方式创建的每个输入（通过类名称区分）。

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

Answer 3

您可以在每个输入上使用keypress事件执行此操作，如下所示：

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

检查JSFiddle demo。它也需要一些验证，但我想主要的想法是明确的。

Answer 4

你需要js（和moslt可能是jquery或任何其他js库）。

为每个input.prevent空间设置onkeyup事件，如果输入的字符正确，则关注下一个兄弟（这样可以防止在每个框中输入多于1个字符）

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

Answer 5

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

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

更改css以调整输入宽度。