自定義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使它們“像正方形”以僅容納一個字符