带有自定义模式的HTML输入文本

我正在创建一个web表单，该表单具有一个字段，该字段应保持以下模式：

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

所有字符都必须是数字，如果可能，我想显示如下示例中的字段：

这是我目前的建议，但产出不是预期的

  <div class="form-group col-sm-12">
                <label for="numero_ticket" class="h4">Número de Ticket para facturar (30 digitos)</label>
                <input type="numero_ticket" class="form-control" id="numero_ticket_facturar" pattern="[0-9\s]{4,4}[0-9\s]{3,3}[0-9\s]{6,6}[0-9\s]{4,4}[0-9\s]{4,4}[0-9\s]{3,3}[0-9\s]{5,5}" placeholder="Número de Ticket para facturar" required>
                <div class="help-block with-errors"></div>
            </div>

Número de Ticket para facturar（30个数字）

---

如何使用下划线字符来帮助用户知道表单字段中需要输入的确切数字？

下面是一个使用CSS技巧和JQuery描述的示例

$（'input'）。在（'input'，function（）上{
如果（$（this）.val（）.length>=4）{
$（this.next（'input'）.focus（）；
}
});
#包装器{
显示：内联块；
}
#纵向输入{
网格模板列：自动；
显示：网格；
栅隙：32px；
}
输入{
边界：无；
宽度：6厘米；
背景：
重复线性梯度（90度，
灰色0，
灰色1ch，
透明0，
透明（1.5ch）
0 100%/100%2px不重复；
颜色：浅灰色；
字体：5ch控制台，单空格；
字母间距：.5cm；
}
输入：：之后{
}

16位数字：

下面是一个使用CSS技巧和JQuery描述的示例


$（'input'）。在（'input'，function（）上{
如果（$（this）.val（）.length>=4）{
$（this.next（'input'）.focus（）；
}
});
#包装器{
显示：内联块；
}
#纵向输入{
网格模板列：自动；
显示：网格；
栅隙：32px；
}
输入{
边界：无；
宽度：6厘米；
背景：
重复线性梯度（90度，
灰色0，
灰色1ch，
透明0，
透明（1.5ch）
0 100%/100%2px不重复；
颜色：浅灰色；
字体：5ch控制台，单空格；
字母间距：.5cm；
}
输入：：之后{
}

16位数字：

由于存在间隙，需要多个输入框。30inputs@epascarello，一个我可以看到如何操作的示例？@j08691，一个我可以看到如何操作的示例？由于存在间隙，将需要多个输入框。30inputs@epascarello，一个我可以看到如何做的例子？@j08691，举个例子，我可以看看怎么做吗？谢谢，它工作得很好，现在我需要将输入值发送到远程数据库，所有值都作为唯一值存储在同一个id标记下，还是我需要单独存储每个输入值？您需要单独存储它们，但连接它们应该相当简单。给他们每个人一个相同的类或给我们一个parentID，然后用
.each（）
遍历他们。你能把回答的问题也标记一下吗？谢谢，它工作得很好，现在我需要将输入值发送到远程数据库，所有值都作为唯一值存储在同一个id标记下，还是我需要单独存储每个输入值？你需要单独存储它们，但将它们连接起来应该相当简单。给他们每个人一个相同的类或给我们一个parentID，然后用
.each（）
遍历他们。你能把回答的问题也标记一下吗？