Question

我正在尝试创建一个信用验证表单。输入字段，无论什么应该始终是最多19位数，并有4个由短划线分隔的数字。到目前为止，我可以在键入时进行，但粘贴不起作用，也没有编辑几个数字，表单不会更新。

我不想使用任何插件，而我的客户只使用万事达卡和维萨卡，这就是他们要求19位数的原因。

到目前为止，我还试图将我的代码放在一个循环中，但循环仍然无法复制和粘贴以及其他方案

＆＃13;

var cc = $('#cc-card');

// start loop
setInterval(function() {

  jQuery(cc).on('propertychange click blur change change keyup keydown paste', function() {

    var cctlength = jQuery(this).val().length;

    // output should always be 0000-0000-0000-0000

    switch (cctlength) {
      case 4:
        var cctVal = jQuery(this).val();
        var cctNewVal = cctVal + '-';
        jQuery(this).val(cctNewVal);
        break;
      case 9:
        var cctVal = jQuery(this).val();
        var cctNewVal = cctVal + '-';
        jQuery(this).val(cctNewVal);
        break;
      case 14:
        var cctVal = jQuery(this).val();
        var cctNewVal = cctVal + '-';
        jQuery(this).val(cctNewVal);
        break;
      default:
        break;

    }

  });

  // end loop
}, 100);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cc-card" type="text" maxlength="19" placeholder="•••• •••• •••• ••••">

＆＃13;

Answer 1

首先，您不需要使用setInterval，只要输入值发生变化（使用input事件），您就可以更新。

其次，如果用户在任何时候添加值，您将其分成4个块并在其间插入-？

最后，每次读取值时，您都可以删除所有非数字字符，这些字符将删除添加的-以及用户可能添加的任何其他字符。

注意：如果用户在字符串结束前编辑了一个数字，您还必须重置光标位置，因为更新一个值会自动将光标移动到最后。

＆＃13;

const cc = $('#cc-card');

function chunksOf(string, size) {
  var i, j, arr = [];
  for (i = 0, j = string.length; i < j; i += size) {
    arr.push(string.substring(i, i + size));
  }
  return arr;
}

cc.on('input', function() {
  const elem = cc.get(0);                    // store DOM element ref
  const cursorPosition = elem.selectionEnd;  // remember cursor position

  const value = cc.val().replace(/\D/g, ''); // strip non-numeric chars
  const numberChunks = chunksOf(value, 4);   // split into 4-digit chunks
  const newValue = numberChunks.join('-');   // combine 4-digit chunks into a single string
  cc.val(newValue);                          // update new value

  elem.selectionStart = elem.selectionEnd = cursorPosition + 1; // reset cursor position since the value changed
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Enter Credit Card:</h3>
<input id="cc-card" type="text" maxlength="19" placeholder="•••• •••• •••• ••••">

＆＃13;

创建信用卡输入。为什么表单没有添加破折号到4位数的信用卡？

1 个答案: