Как настроить входной тег html, чтобы заставить пользователя следовать определенному формату -, -, -, - где каждый da sh (-) представляет число?

Question

У меня есть html вход:

     <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Numéro de série</InputGroupText>
              </InputGroupAddon>
              <Input
                type="number"
                id="numeroSerie"
                name="num_serie"
                defaultValue={this.state.num_serie}
                onChange={this.onChange}
                required
                autofocus
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-lock"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>

Он представляет серийный номер продукта. Серийный номер отформатирован следующим образом:

-, -, -, -

, где каждый da sh представляет шестнадцатеричное число. Так, например, это допустимый формат:

1e,9c,aa,5d

Таким образом, функциональность, которую я хотел бы реализовать, в точности аналогична той, которую вы вводите в игру или серийный программный ключ. Вы не получаете нормального ввода, вы получаете предопределенный набор полей, которые соответствуют формату серийного ключа и которые вы должны заполнить.
Что-то вам нравится:

Таким образом, после того, как пользователь заполнит каждое поле, курсор клавиатуры автоматически пропустит следующее поле.
Мне интересно, возможно ли это реализовать в одном элементе ввода html, или мне просто придется реализовать эту функцию вручную, используя несколько полей ввода.

Я искал, как настроить ввод html, чтобы сделать это, но ни одно решение не предлагает такую ​​функцию. Это кажется настолько простым, что я подумал, что он должен быть реализован в html. Но, видимо, это не тот случай?