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

Question

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

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

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

Answer 1

您可以访问此 URL 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;
}