Javascript 动态格式化信用卡到期日期的文本框

我知道我以前见过一些网站使用这个，但现在我找不到任何例子

我想要的是一个文本框，在用户输入前两个数字（月份）后，添加一个正斜杠，然后用户输入最后两个数字（年份），但如果他们要退格，则会跳过正斜杠（即，它不仅仅是插入文本框）。javascript如何实现这一点

编辑：下面是我尝试过的，但是用户可以单击文本框并删除“/”如果他们愿意的话

var expiresDateField = document.getElementById('j_idt8:ccexpires');
        expiresDateField.onkeydown = function() {
            var key = event.keyCode || event.charCode;
            if (expiresDateField.value.length === 2)
                expiresDateField.value = expiresDateField.value + " / ";
            else if (expiresDateField.value.length === 6 && (key === 8 || key === 46))
                expiresDateField.value = expiresDateField.value.substr(0, 2);
};

---

您可以使用jquery屏蔽输入插件实现同样的功能

$（“日期”）.mask（“99/99”）；
$（“#日期”）.keyup（函数（）{
//得到日期
var datevalue=$（this.val（）；
//仅当日期已满时，如下所示：“xx/xxxx”继续
如果（datevalue.length==5）{
验证日期（datevalue）；
}否则{
清洁（）；
}
});
函数clean（）{
$（'#msg'）.html（''）；
}
函数验证日期（datevalue）{
如果（datevalue！=null | | datevalue！=''）{
//将日期拆分为tmp变量
var tmp=datevalue.split（'/'）；
//得到月份和年份
var月=tmp[0]；
var年=tmp[1]；
如果（月>=1&&month，您可以使用jquery屏蔽输入插件进行相同的操作

$（“日期”）.mask（“99/99”）；
$（“#日期”）.keyup（函数（）{
//得到日期
var datevalue=$（this.val（）；
//仅当日期已满时，如下所示：“xx/xxxx”继续
如果（datevalue.length==5）{
验证日期（datevalue）；
}否则{
清洁（）；
}
});
函数clean（）{
$（'#msg'）.html（''）；
}
函数验证日期（datevalue）{
如果（datevalue！=null | | datevalue！=''）{
//将日期拆分为tmp变量
var tmp=datevalue.split（'/'）；
//得到月份和年份
var月=tmp[0]；
var年=tmp[1]；
如果（月>=1&&month使用和

假设您希望从今天的日期开始动态设置10年的日期范围

包括jQuery.InputMask.js和moment.js库（CDN或自托管）

[CDN]

然后

<input type="password" id="expires_mmyy" name="cc_expires" maxlength="5" />

$('#expires_mmyy').inputmask({
   alias: 'datetime', 
   inputFormat: 'mm/yy'
   min: moment().add(1, 'M').format('MM/YY'),
   max: moment().add(10, 'Y').format('MM/YY')
})

// this fixes an Android bug that will probably be fixed in the near future...
$('#expires_mmyy').attr('type', 'text')



$（'#expires_mmyy'）。输入掩码({
别名：“datetime”，
输入格式：“mm/yy”
最小：力矩（）。添加（1，'M'）。格式（'MM/YY'），
最大：力矩（）。添加（10，'Y'）。格式（'MM/YY'））
})
//这修复了一个可能在不久的将来修复的Android bug。。。
$（'#expires_mmyy'）.attr（'type'，'text'））
使用和保存

假设您希望从今天的日期开始动态设置10年的日期范围

包括jQuery.InputMask.js和moment.js库（CDN或自托管）

[CDN]

然后

<input type="password" id="expires_mmyy" name="cc_expires" maxlength="5" />

$('#expires_mmyy').inputmask({
   alias: 'datetime', 
   inputFormat: 'mm/yy'
   min: moment().add(1, 'M').format('MM/YY'),
   max: moment().add(10, 'Y').format('MM/YY')
})

// this fixes an Android bug that will probably be fixed in the near future...
$('#expires_mmyy').attr('type', 'text')



$（'#expires_mmyy'）。输入掩码({
别名：“datetime”，
输入格式：“mm/yy”
最小：力矩（）。添加（1，'M'）。格式（'MM/YY'），
最大：力矩（）。添加（10，'Y'）。格式（'MM/YY'））
})
//这修复了一个可能在不久的将来修复的Android bug。。。
$（'#expires_mmyy'）.attr（'type'，'text'））
你能告诉我们你到目前为止尝试了什么吗？你能告诉我们你到目前为止尝试了什么吗？谢谢你，这太完美了！@jschwalbe如果这有助于你解决问题，请将其标记为正确答案。现在是否出错？输入掩码url没有被解析？谢谢，这太完美了！@jschwalbe请将其标记为正确答案回答它是否有助于您解决问题。它现在是否出错？inputmask url未被解析？
<input type="password" id="expires_mmyy" name="cc_expires" maxlength="5" />

$('#expires_mmyy').inputmask({
   alias: 'datetime', 
   inputFormat: 'mm/yy'
   min: moment().add(1, 'M').format('MM/YY'),
   max: moment().add(10, 'Y').format('MM/YY')
})

// this fixes an Android bug that will probably be fixed in the near future...
$('#expires_mmyy').attr('type', 'text')