在输入中的每第4个字符后插入破折号

Question

我想在输入中的每第4个字符后插入一个破折号.我有一个信用卡输入框.当用户输入并到达每个第4个字符时,jQuery将插入连字符(-).

例如: 1234-5678-1234-1231

更新:我正在尝试一些代码,我认为我是如此接近正确的代码,但我有一些问题.这是我的代码示例;

$('.creditCardText').keyup(function() {

var cardValue = $('.creditCardText').val(),
    cardLength = cardValue.length;

if ( cardLength < 5 ) {
    if ( cardLength % 4 == 0 ) {
        console.log('4 lük geldi');
        cardValue += "-";
        $('.creditCardText').val(cardValue);
    }
} else {
    if ( cardLength % 5 == 0 ) {
        console.log('5 lük geldi');
        cardValue += "-";
        $('.creditCardText').val(cardValue);

    }
}

});

Answer 1

我非常喜欢这个自动格式化的插件: 这里.

只要你已经在使用JQuery,那就是.

您可以使用一行代码轻松强制破折号,如下所示:

$("#credit").mask("9999-9999-9999-9999");

当用户在字段中键入时,破折号将自动出现在正确的位置,并且它们将无法删除它们.

此外,您可以使用?面具中的角色来容纳不同长度或格式的信用卡.例如,要接受14位和16位数的输入,您将执行以下操作:

$("#credit").mask("9999-9999-9999-99?99");

请记住,这只是客户端验证

编辑:掩码插件假定该字段有一个或有限多个正确的格式.例如,信用卡号码只有少数几种格式.插件用于确保您的输入仅为其中一种格式.

所以从技术上讲,如果你想要每四位数之后有一个破折号,但对于任意数量的数字,那么这个插件不适合你.

我建议你限制可能的输入是合理的,因为肯定没有1000位长信用卡这样的东西.但是如果你真的想要这个功能,你必须自己编写脚本或者找到另一个插件.到目前为止,我还没有意识到.

Answer 2

我已经修复了你的代码,但仍强烈建议服务器验证并使用四个文本框,并在它们之间巧妙地切换:

$('.creditCardText').keyup(function() {
  var foo = $(this).val().split("-").join(""); // remove hyphens
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");
  }
  $(this).val(foo);
});

JSFiddle链接

Answer 3

基于@ think123答案,在vanilla JS中,没有JQuery:

document.querySelector('.creditCardText').addEventListener('input', function (e) {
    var foo = this.value.split("-").join("");
    if (foo.length > 0) {
        foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");
    }
    this.value = foo;
});

我知道问题是关于JQuery,但我认为这个答案也有帮助.

Answer 4

这个jquery扩展将每隔四个字符插入一个空格:https://github.com/stripe/jquery.payment

Answer 5

如果您正在寻找纯 Javascript 解决方案，请查看下面我的函数。它支持 American Express 格式（15 位）以及 Visa、MasterCard 等（16 位）。

注意将替换整个值并始终将焦点放在输入末尾的简单解决方案：如果用户编辑他之前输入的内容，可能会很烦人。

input_credit_card = function(input) {
  var format_and_pos = function(char, backspace) {
    var start = 0;
    var end = 0;
    var pos = 0;
    var separator = " ";
    var value = input.value;

    if (char !== false) {
      start = input.selectionStart;
      end = input.selectionEnd;

      if (backspace && start > 0) // handle backspace onkeydown
      {
        start--;

        if (value[start] == separator) {
          start--;
        }
      }
      // To be able to replace the selection if there is one
      value = value.substring(0, start) + char + value.substring(end);

      pos = start + char.length; // caret position
    }

    var d = 0; // digit count
    var dd = 0; // total
    var gi = 0; // group index
    var newV = "";
    var groups = /^\D*3[47]/.test(value) ? // check for American Express
      [4, 6, 5] : [4, 4, 4, 4];

    for (var i = 0; i < value.length; i++) {
      if (/\D/.test(value[i])) {
        if (start > i) {
          pos--;
        }
      } else {
        if (d === groups[gi]) {
          newV += separator;
          d = 0;
          gi++;

          if (start >= i) {
            pos++;
          }
        }
        newV += value[i];
        d++;
        dd++;
      }
      if (d === groups[gi] && groups.length === gi + 1) // max length
      {
        break;
      }
    }
    input.value = newV;

    if (char !== false) {
      input.setSelectionRange(pos, pos);
    }
  };

  input.addEventListener('keypress', function(e) {
    var code = e.charCode || e.keyCode || e.which;

    // Check for tab and arrow keys (needed in Firefox)
    if (code !== 9 && (code < 37 || code > 40) &&
      // and CTRL+C / CTRL+V
      !(e.ctrlKey && (code === 99 || code === 118))) {
      e.preventDefault();

      var char = String.fromCharCode(code);

      // if the character is non-digit
      // OR
      // if the value already contains 15/16 digits and there is no selection
      // -> return false (the character is not inserted)

      if (/\D/.test(char) || (this.selectionStart === this.selectionEnd &&
          this.value.replace(/\D/g, '').length >=
          (/^\D*3[47]/.test(this.value) ? 15 : 16))) // 15 digits if Amex
      {
        return false;
      }
      format_and_pos(char);
    }
  });

  // backspace doesn't fire the keypress event
  input.addEventListener('keydown', function(e) {
    if (e.keyCode === 8 || e.keyCode === 46) // backspace or delete
    {
      e.preventDefault();
      format_and_pos('', this.selectionStart === this.selectionEnd);
    }
  });

  input.addEventListener('paste', function() {
    // A timeout is needed to get the new value pasted
    setTimeout(function() {
      format_and_pos('');
    }, 50);
  });

  input.addEventListener('blur', function() {
    // reformat onblur just in case (optional)
    format_and_pos(this, false);
  });
};

input_credit_card(document.getElementById('credit-card'));

<form action="" method="post">
  <fieldset>
    <legend>Payment</legend>
    <div>
      <label for="credit-card">Credit card</label>
      <input id="credit-card" type="text" autocomplete="off" />
    </div>
  </fieldset>
</form>

在 jsFiddle 上查看