信用卡到期日期字段的复制行为

时间:2015-10-19 11:25:55

标签: javascript jquery-plugins html-input

我正在尝试复制 CC exp日期 MM / YY格式字段的行为,如Digital Ocean所示[您需要登录到请参阅页面和付款表格]

它的工作原理如下:
1.如果我按 0 1 ,它会等待进一步输入
2.如果我按 2 - 9 之间的任何内容,它会转换为02/09/等,然后等待 YY


用户可以按01/,我必须处理
用户可以按1/,我也必须处理

对DO的检查不是很严格,允许输入15/34或复制粘贴非法值,这些值是单独处理的。

我尝试添加一个oninput事件监听器来检查输入值,并修改该值是否大于2的数字。但这似乎并不优雅。我必须在每次按键后检查输入字段值,它看起来像一团糟。

修改
在仔细思考之后,我终于能够重新创建大部分预期的功能,但它仍然不完美。

jQuery('body').on('keyup', '.paymentDate', function(e){
console.log($(this).val());

var val = $(this).val();
if(!isNaN(val)) {
    if(val > 1 && val < 10 && val.length == 1) {
        temp_val = "0" + val + "/";
        $(this).val(temp_val);
    }
    else if (val >= 1 && val < 10 && val.length == 2 && e.keyCode != 8) {
        temp_val = val + "/";
        $(this).val(temp_val);			        	
    }
    else if(val > 9 && val.length == 2 && e.keyCode != 8) {
        temp_val = val + "/";
        $(this).val(temp_val);
    }
}
else {
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="paymentDate" class="paymentDate">

Find Fiddle

是否有更智能的方式或插件可以有效地处理这个问题?

1 个答案:

答案 0 :(得分:0)

在第三个if语句中再添加一个条件

    else if(val > 9 && val.length == 2 && e.keyCode != 8) {
      if (val > 12) {
        temp_val = "0" + val[0] + "/" + val[1];
        $(this).val(temp_val);
      } else {
        temp_val = val + "/";
        $(this).val(temp_val);
      }
    }