добавить '/' со вторым символом в jquery

Question

Здесь у меня есть поле ввода.

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

В этом входе, когда пользователь записывает дату истечения срока действия своей карты, тогда после ММ должно автоматически добавляться '/', например 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

Это решает удаление '/'

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">

Answer 2

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 3

Поскольку вы всегда добавляете '/' после ввода двух символов, разве не будет проще?

$('#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 Link: https://jsfiddle.net/d1Lcwysa/4/

Answer 4

$("#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 5

просто замените требование наличия 3 числовых символов только на 2 и одну группу захвата вместо 2 ( отредактированная версия : наконец-то сделали это с 2 группами захвата, но вторая становится необязательной):

    
    $('#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">

РЕДАКТИРОВАТЬ изменено, так что вы можете удалить с помощью обратной косой черты с помощью проверочного ключа (единственным недостатком является то, что он никогда не будет переформатирован на клавишу обратной косой черты).Также добавлена ​​еще одна замена, так что если вы добавите число перед существующим /, оно тоже будет переформатировано (возможно, это можно сделать в одном более сложном регулярном выражении, но оно работает)