如何将文本框拆分为每个字符的多个子文本框

Question

我正在设计一个PHP表单，其中包含一些输入字段，如下图所示。

如何将输入类型（文本框）拆分为单个字符子文本框，或将文本框拆分为每个字符的多列文本框，分别为给定字符串。

如何在其中插入数据，例如|JOHN DOE| |J|O|H|N| |D|O|E|这种方式

Answer 1

您可以访问此网址http://jsfiddle.net/w564j/了解样本

HTML

<input type="text" maxlength="9" id="text"/>

CSS

#text{
    background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");    
    width: 195px;
    height: 18px;
    background-size: 20px;
    border: none;
    font-family: monospace;
    font-size: 13px;
    padding-left: 5px;
    letter-spacing: 12px;
}