我要设计一个注册表
我必须创建一个文本框并将其分成多个部分,每个部分只接受一个字符,正如我们在图像中看到的那样。
我不知道如何划分文本框,因为稍后我还需要从数据库中填充某些字段。您能否告诉我一种将文本框划分为多个部分以在每个部分中输入一个字符的解决方案。
我要设计一个注册表
我必须创建一个文本框并将其分成多个部分,每个部分只接受一个字符,正如我们在图像中看到的那样。
我不知道如何划分文本框,因为稍后我还需要从数据库中填充某些字段。您能否告诉我一种将文本框划分为多个部分以在每个部分中输入一个字符的解决方案。
如果这只是一种形式,而客户希望拥有完全相同的形式,则使用<input type="text" maxlength="1" />
. 您可以编写一些 JSP 标记来为您生成所有这些<input type="text" maxlength="1" />
。
<mytag:generate size="12">
另一方面,您可以使用 mask 属性并将您的掩码更改为mask('0|0|0|0|0|0|0')
,然后通过调整输入文本的大小、字体大小并使掩码可见,您可以模仿上述形式。请注意,如果您将遮罩的颜色更改为与背景颜色相同,则表单看起来也会更好。
我认为,您需要为每个字母创建单独的输入标签,因为我们无法拆分单个输入标签
在 HTML 中生成这样的表单的真正价值是什么?据我所知,制作这样的表格是为了让计算机程序可以快速识别不完整或不正确的填充物和/或允许对手动填充的填充物进行目视检查。
如果这里真正需要的是从输入值中生成这样的表单,我相信正确的设计是提供一个常规的表单输入元素,然后处理构建预期格式的提交。
关注点分离很重要。在这种情况下,强制用户输入 character-tab-character 将成为一种糟糕的体验,这将迫使开发人员放置 javascript 代码只是为了确保一旦输入了一个字母,光标就可以转到下一个位置。无需提及版本会是什么样子。
到目前为止还没有构建这样的组件是有原因的。原因是糟糕的 UI/UX。
希望对您的决定有所帮助。