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

Question

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

我想要的是一个文本框，在用户输入前两个数字(月份)后添加一个正斜杠，然后用户键入最后两个数字(年份)，但如果他们要退格，它将跳过正斜杠(即它不只是注入(inject)到文本框中)。这怎么可能用 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屏蔽输入插件来实现相同的效果 See working Fiddle here

$("#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.');
    }
  }

}