如何将文本框分成多个部分，以便每个部分接受一个字母？

我要设计一个登记表 which looks like the following image 如何将文本框分成多个部分，以便每个部分接受一个字母？

我要创建一个文本框，并将其分成与每个部分的多个部分接受仅一个字符作为我们可以在图像中看到。

我不知道如何分割文本框，以后我还需要填充数据库中的某些字段。您能否告诉我一个解决方案，将文本框分成若干部分，在每个部分输入一个字符。

2013-08-28 user2077648

你需要一个jQuery插件面具像http://igorescobar.github.io/jQuery-Mask-Plugin /和http://jquery-plugins.net/tag/input-format –

我看到这个例子，但我想为每个字符单独的文本框 – user2077648

你想要将一个基于纸张的表单转换为一个电子表格......但是，想让它看起来完全一样吗？这些纸质表格是在100年前设计的，需要迅速燃烧...我的意思是，您需要15位数字作为邮政编码吗？只要给你的输入一个最大长度，用css制作出漂亮和现代的外观，把所有需要的验证放在那里，它会看起来非常完美，并具有良好的用户体验...... – Thanos

<input type="text" maxlength="1" />

尝试添加属性最大长度

我创建了一个PHP示例，供您参考

http://pastebin.com/uj2jywKz

来源

2013-08-28 04:07:40 Parfait

你的建议写几百个输入标签？ – speeday125

是的，我同意@ speeday125，有没有其他有效的方法呢？ – user2077648

user2077648，我创建了一个PHP示例，供您参考 http://pastebin.com/uj2jywKz – Parfait

如果这仅仅是一个形式和客户希望有完全相同的形式，然后用<input type="text" maxlength="1" />构建它。您可以编写一些JSP标签，为您生成所有这些<input type="text" maxlength="1" />。

<mytag:generate size="12">

在另一方面，你可以使用mask属性并通过调整输入文字，字体大小的尺寸，并使得面膜可见，你可以模仿上述形式改变你的面具mask('0|0|0|0|0|0|0')，然后。请注意，如果您更改背景颜色的面具颜色，那么表格看起来也会更好。

来源

2013-08-31 07:33:48

在HTML中生成这样的表单的真正价值是什么？据我所知，这样做的形式可以使计算机程序能够快速识别不完整或不正确的填充物和/或允许对手动填充的填充物进行视觉检查。

如果这里真正需要的是产生这样了输入值的形式，我相信正确的设计是提供一个正规的形式输入元素，稍后过程中提交建设预期的格式。

分离问题很重要。在这种情况下，强制用户输入字符制表符会成为一种不好的体验，迫使开发人员只需输入javascript代码即可确保一旦输入字母，光标就可以进入下一个位置。无需提及哪些版本会是什么样子。

到目前为止还没有建立这样的组件是有原因的。原因是糟糕的UI/UX。

希望它能帮助您做出决定。

来源

2013-10-25 18:00:58

我想，你需要为每个字母创建单独的输入标记，因为我们不能splitup单个输入标签

来源

2014-03-12 12:26:51

如何将文本框分成多个部分，以便每个部分接受一个字母？

回答

相关问题