如何设置信用卡有效期输入字段的样式，使其包含空格和正斜杠？

Question

我想知道如何style一个输入字段（类型=文本）以空格和数字之间的斜杠显示，如下所示：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9lTlRUZy5wbmcifQ==” alt =“信用卡有效期”>“ >>

我知道如何将输入限制为数字并执行验证。那不是我要的我想知道实际的显示。您可以使用CSS以某种方式将前两个MM数字与后两个YY数字分开吗？

我希望用户只能输入4位数字并将其显示为：MM / YY

（（与How to format credit card input fields and expiry date不同的问题。该问题侧重于验证。）

我想知道如何设置一个输入字段（类型=文本）的样式以显示空格和数字之间的斜杠，例如：我知道如何将输入限制为数字并执行验证。那是...

Answer 1

读取前几个字符并将其保存到变量中。然后读取最后一个字符，并将它们写入其他变量...然后用它们之间的空格连接。

Answer 2

您可以使用两个输入字段来完成此操作，删除输入字段的边界，将边界添加到包装器元素以显示为一个输入，并在它们之间放置一个/。 -jsFiddle Demo

Answer 3

如果您只是在寻找样式，这是一个非常简单的技巧，请尝试以下方法：

Answer 4

我的解决方法是在输入2个字符后添加一个斜杠。这就是我来这里寻找的希望，希望可以帮助其他人。