有斜线问题的信用卡到期日

如何解决有斜线问题的信用卡到期日

信用卡有效期：mm/yy 每当我输入两个数字时，我需要添加“/”，但目前当我删除第三个数字时，他只会删除一个数字。如何删除第三个数字和斜杠？

请帮忙谢谢。

var characterCount
$('#expiry').on('input',function(e) {
  if ($(this).val().length == 2 && characterCount < $(this).val().length) {
    $(this).val($(this).val() + '/');
  }
  characterCount = $(this).val().length
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="expiry" type="text" />

解决方法

纯js

const inp = document.querySelector('#expiry')

inp.onkeydown = function() {

  const key = event.keyCode || event.charCode;
  
  if (key !== 8 && key !== 46 ) {
    if (inp.value.length == 2) {
        inp.value= (inp.value+'/');
    }
  }
  
  if (( key == 8 || key == 46 ) && inp.value.length === 4) {
    inp.value = inp.value.slice(0,3)
  }    
};

<input id="expiry" type="text" />

,

您可以添加额外的 keyup 事件，当按下退格键时，删除值末尾的所有尾部斜杠。

我还建议在输入上设置 maxlength、pattern 和 inputmode 属性。

var characterCount;
$('#expiry').on('input',function(e) {
  if ($(this).val().length == 2 && characterCount < $(this).val().length) {
    $(this).val($(this).val() + '/');
  }
  characterCount = $(this).val().length
}).on('keyup',function(e) {
  if (e.which === 8) {
    $(this).val($(this).val().replace(/\/$/,''))
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="expiry" type="text" maxlength="5" pattern="^\d{2}/\d{2}$" inputmode="numeric" />