Пользовательский компонент ввода HTML

Question

Я пытаюсь создать новый HTML-компонент, используя JavaScript и CSS. Новый компонент в точности похож на TextField (<input type="text">).

Дополнительным поведением является то, что каждый символ в TextField отделяется в поле.

Доступен ли какой-либо существующий компонент? Если нет, пожалуйста, дайте несколько идей, как разработать этот компонент.

Answer 1

В множественном текстовом вводе ничего не существует, как вы описали.

Вам нужно будет создать его самостоятельно, используя несколько <input type="text"/> элементов.

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

Просто ради интереса, зачем вам этот контроль? Обычно такого рода поля ужасны с точки зрения юзабилити (даже если вы подключаете обработчики событий, чтобы автоматически переключать вас из одного поля в другое)

Answer 2

Если вы просто хотите, чтобы выглядел как символы в прямоугольниках, вы можете использовать шрифт фиксированной ширины и умный фоновый рисунок. Следует признать, что это может создать некоторые интересные проблемы интернационализации.

Answer 3

Я бы использовал ряд полей ввода с пределом символов 1 и использовал бы CSS, чтобы сделать их "квадратными", чтобы вместить всего один символ