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 &amp;&amp; (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.');
    }
  }

}

Answer 2

使用inputmask和moment。

让我们说您希望动态地从今天的日期起10年的日期范围...

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

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

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

2 个答案: