自定义HTML输入组件

Question

我正在尝试使用javascript和CSS创建一个新的html组件。 新组件与TextField (<input type="text">)完全相同。

附加行为是TextField中的每个字符都在一个框中分开。

是否有可用的现有组件？如果没有，请提供一些如何设计这个组件的想法。

Answer 1

HTML中没有任何内容可用于您所描述的多文本输入。

您需要使用多个<input type="text"/>元素自行构建它。

TextField(<input type="text"/><input type="text"/><input type="text"/>...)

虽然只是出于兴趣，为什么你想要这种控制？从可用性的角度来看，这类领域通常是可怕的（即使您在事件处理程序中挂钩以自动将您从一个框切换到下一个框）

Answer 2

如果您只是希望看，就像字符在框中一样，您可以使用固定宽度字体和巧妙的背景图形。不可否认，这可能会带来一些有趣的国际化挑战。

Answer 3

我会使用一系列字符数限制为1的输入框，并使用CSS使它们像方形一样只容纳一个字符