如何将一个文本框分成若干部分,以便每个部分只能接受一个字母?

4

我需要设计一个注册表单长这样

我需要创建一个文本框,将其分成多个部分,每个部分只能接受一个字符,就像图片中所示。

我不知道如何将文本框分割成几个部分,因为后面我还需要从数据库填充某些字段。请告诉我如何将文本框分割成几个部分,以便每个部分只能输入一个字符。


你需要一个像 http://igorescobar.github.io/jQuery-Mask-Plugin/ 和 http://jquery-plugins.net/tag/input-format 这样的 jQuery Mask 插件。 - Arvind Bhardwaj
2
你想将一份纸质表格转换成电子表格...但是你希望它看起来完全一样吗?这些纸质表格是100年前设计的,需要尽快淘汰...我的意思是,你需要15位数字的邮政编码?只需为输入设置最大长度,使用CSS使其外观漂亮和现代化,将所有必要的验证放在那里,它将具有良好的用户体验,看起来完美无瑕。 - Thanos
@Thanos,你能否给我推荐一份示例代码? - user2077648
请看这里:http://jsfiddle.net/2rN7u/1/ - Thanos
@Thanos 但是在你的例子中,文本框没有被分割,它是一个单一的文本框。 - user2077648
显示剩余3条评论
4个回答

0
如果这只是一个表单,客户想要完全相同的表单,则可以使用<input type=" text" maxlength = "1" />构建它。您可以编写一些JSP标记,为您生成所有这些<input type=" text" maxlength = "1" />
<mytag:generate size="12">

另一方面,您可以使用掩码属性并将掩码更改为mask('0|0|0|0|0|0|0'),然后通过调整输入文本的大小、字体大小并使掩码可见来模仿上述表单。请注意,如果将掩码颜色更改为与背景颜色相同,则表单看起来更好。

0

制作这样的HTML表单的真正价值是什么?据我所知,这种表单是为了让计算机程序快速识别填写不完整或不正确的内容和/或允许手动填写的内容进行视觉检查。

如果真正需要的是根据输入值生成这样的表单,我认为正确的设计应该是提供常规的表单输入元素,然后在提交时处理构建预期格式。

关注点分离很重要。在这种情况下,强制用户输入字符-制表符-字符将成为一种糟糕的体验,这将迫使开发人员放置JavaScript代码,以确保一旦输入字母,光标就可以移到下一个位置。更不用说会出现什么版本。

之所以迄今为止没有构建此类组件的原因是UI / UX较差。

希望这能对您的决策有所帮助。


0
我认为,你需要为每个字母创建单独的输入标签,因为我们无法拆分单个输入标签。

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

尝试添加maxlength属性。

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

http://pastebin.com/uj2jywKz


你建议写数百个输入标签吗? - aizaz
是的,我同意@speeday125的观点,还有其他更有效的方法吗? - user2077648
user2077648,我为您创建了一个PHP样例供参考http://pastebin.com/uj2jywKz - Parfait
除非有插件,否则我认为没有其他方法。 - Manu M
@Parfait,你能否解释一下你的代码?我不太懂 PHP。 - user2077648

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接