如何设置信用卡到期日输入字段的样式以包含空格和正斜杠？

Question

我想知道怎样才能样式一个输入字段(类型=文本)显示为空格和数字之间的斜线,这样的:

我知道如何将输入约束到数字并执行验证.那不是我要问的.我想知道实际的显示.你可以使用CSS以某种方式做到这一点,从最后两个YY数字中分割前两个MM数字？

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

(不同的问题来自如何格式化信用卡输入字段和到期日期.该问题侧重于验证.)

Answer 1

您可以使用两个输入字段来完成此操作,删除输入字段的边框,向包装元素添加边框以显示为一个输入,并/在两者之间添加边框,如此.- jsFiddle演示

HTML

 <span class="expiration">
    <input type="text" name="month" placeholder="MM" maxlength="2" size="2" />
    <span>/</span>
    <input type="text" name="year" placeholder="YY" maxlength="2" size="2" />
</span>

CSS

.expiration {
    border: 1px solid #bbbbbb;
}
.expiration input {
    border: 0;
}

结果

这只是展示这个想法所需的CSS,当然你可以根据自己的喜好设计它.

我使用<span>s是因为它们是内联元素,输入字段也是如此.

Answer 2

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

如何使用 JavaScript 获取字符串的最后一个字符

获取this.title属性的前2个字符，并调用对应的id

或者，有 2 个字段并使用 CSS 设置它们的样式，使其看起来像单个字段。