Question

这里我有一个输入字段。

<input name="expiry_date" id="expiry_date" placeholder="MM / YYYY" class="form-control">

在此输入中，当用户输入其卡的到期日期时，应该在MM之后自动添加“ /”，如 03 / 。

我写了一个jquery代码，其中/附加，但是当我写第三个字符（如03/3）时。但是在这里，我希望它附加第二个字符（例如03之后不久）。

 $('#expiry_date').keyup(function() {
        $('#expiry_date').attr('maxlength','7');
        var curr_val = $(this).val();
        var expiry_date = curr_val.replace(/^(\d\d)(\d)$/g,'$1/$2').replace(/[^\d\/]/g,'');
        $('#expiry_date').val(expiry_date);
    });

JsFiddle链接在下面：- http://jsfiddle.net/fXnFF/2/

任何帮助将不胜感激。预先感谢。

Answer 1

只需将2个字符和3个数字字符替换为一个捕获组，而不是2个（编辑版本：最终将其包含2个捕获组，但第二个变为可选）：< / p>

    
    $('#expiry_date').keyup(function(e) {
        $('#expiry_date').attr('maxlength','7');
        var key = e.keyCode || e.charCode;
        if( key != 8 ){
            var curr_val = $(this).val();
            var expiry_date = curr_val.replace(/^(\d\d)(\d*)?\//g,'$1/$2').replace(/^(\d\d)(\d*)?$/g,'$1/$2').replace(/[^\d\/]/g,'');
            $('#expiry_date').val(expiry_date);
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="expiry_date" id="expiry_date" placeholder="MM / YYYY" class="form-control">

编辑已更改，因此您可以通过测试键以反斜杠删除（唯一的缺点是它将永远不会在反斜杠密钥上重新格式化）..还添加了另一个替换项，以便在现有数字之前添加数字/，它也被重新格式化（也许可以在一个更复杂的正则表达式中完成，但它可以正常工作）

Answer 2

既然您总是在输入两个字符后附加一个'/'，这会更简单吗？

$('#expiry_date').attr('maxlength','7'); // you only need to set this once
$('#expiry_date').keyup(function() {
    if(  $('#expiry_date').val().length == 2){
        $('#expiry_date').val($('#expiry_date').val() + "/");
    }
});

JSFiddle链接：https://jsfiddle.net/d1Lcwysa/4/

Answer 3

$("#expiry_date").keyup(function() {
  $(this).attr("maxlength", "7");
  var val = $(this).val();
  val = val
    .replace(/^(\d\d)(\d)$/g, "$1/$2")
    .replace(/[^\d\/]/g, "")
    .replace(/^(\d\d)$/g, "$1/");
  $(this).val(val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="expiry_date" id="expiry_date" placeholder="MM / YYYY" class="form-control">

Answer 4

function GetDate() {
$('#expiry_date').attr('maxlength','7');
var curr_val = $('#expiry_date').val();
var length =curr_val.length;
    if(length==2)
        {
         $('#expiry_date').val($('#expiry_date').val() + "/");
        }

}

<input name="expiry_date" id="expiry_date" onkeyup="GetDate()"  placeholder="MM /YYYY" class="form-control">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 5

解决了删除'/'

function GetDate() {
$('#expiry_date').attr('maxlength','7');
var key = event.keyCode || event.charCode;
var curr_val = $('#expiry_date').val();

var length =curr_val.length;
    if(length==2 && key!=8 )
        {
         $('#expiry_date').val($('#expiry_date').val() + "/");
        }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="expiry_date" id="expiry_date"  onkeyup="GetDate()"  placeholder="MM / YYYY" class="form-control">

在jQuery中添加带有第二个字符的“ /”

5 个答案: