动态设置信用卡到期日期文本框的格式

Question

我知道我以前见过一些网站使用它，但现在我找不到任何示例。

我想要的是一个文本框，在用户输入前两个数字（月份）后，添加一个正斜杠，

然后用户键入最后两个数字（年份），但如果他们要退格，它会跳过正斜杠（即它不只是注入文本框）。这怎么可能用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);
};

Answer 1

您可以使用jQuery屏蔽输入插件在此处查看工作小提琴

$("#date").mask("99/99");
$("#date").keyup(function() {
  //get the date
  var datevalue = $(this).val();
  //only if the date is full like this: 'xx/xxxx' continue
  if (datevalue.length == 5) {
    verifyDate(datevalue);
  } else {
    clean();
  }
});
function clean() {
  $('#msg').html('');
}
function verifyDate(datevalue) {
  if (datevalue != null || datevalue != '') {
    //split the date as a tmp var
    var tmp = datevalue.split('/');
    //get the month and year
    var month = tmp[0];
    var year = tmp[1];
    if (month >= 1 && month <= 12) {
      //clean the message
      clean();
    } else {
      $('#msg').html('Month is invalid.');
    }
  }
}

Answer 2

使用输入掩码和时刻。

假设您想要从今天的日期动态开始的 10 年日期范围......

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

[加元]

https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/bindings/inputmask.binding.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js

然后。。。

<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')