37

我想在输入的每 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);

    }
}

});
4

8 回答 8

26

我非常喜欢这个用于自动格式化的插件： here。

只要您已经在使用 JQuery，就是这样。

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

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

当用户在字段中输入时，破折号将自动出现在正确的位置，他们将无法删除它们。

此外，您可以容纳不同长度或格式的信用卡，其中包含?您的面具中的字符。例如，要接受 14 位和 16 位的输入，您可以执行以下操作：

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

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

编辑：掩码插件假定该字段有一种或有限多种正确格式。例如，信用卡号只有几种格式。该插件可确保您的输入仅采用其中一种格式。

所以从技术上讲，如果你想在每四位数字后面加上一个破折号，但是对于任意数量的数字，那么这个插件不适合你。

我建议您将可能的输入限制在合理范围内，因为肯定不存在 1000 位长的信用卡之类的东西。但是如果你真的想要那个功能，你必须自己写脚本或者找另一个插件。到目前为止，我不知道一个。

于 2012-07-24T14:02:51.250 回答
20

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

$('.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);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="creditCardText" />

在 jsFiddle 上查看

于 2013-04-10T07:46:54.117 回答
15

基于@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;
});
<input class="creditCardText" type="text">

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

于 2016-06-03T14:47:58.413 回答
7

如果您正在寻找纯 Javascript 解决方案，请查看下面的函数。它支持美国运通格式（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 上查看

于 2016-10-26T08:50:39.683 回答
3

通过修改@think123和@TheStoryCoder的建议，我为光标添加了 selectionStart 和 SelectionEnd。之后在合适的位置增加光标位置并修改光标位置。它应该解决光标位置不是预期的位置。

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

  var ss, se, obj;
  obj = $(this);
  ss = obj[0].selectionStart;
  se = obj[0].selectionEnd;

  var curr = obj.val();

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

  if (((curr.length % 5 == 0) && ss == se && ss == curr.length) || (ss == se && (ss % 5 == 0))) {
    ss += 1;
    se += 1;
  }

  if (curr != foo) {
    $(this).val(foo);
    obj[0].selectionStart = ss;
    obj[0].selectionEnd = se;
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="creditCardText" type="text">

于 2015-01-12T09:35:11.797 回答
1

最简单的方法是使用简单的 javascript onkey 和函数进行以下操作......它会在您输入/键入的每 3 个字符后放置一个破折号连字符。

function addDash(element) {
  let ele = document.getElementById(element.id);
  ele = ele.value.split('-').join(''); // Remove dash (-) if mistakenly entered.

  let finalVal = ele.match(/.{1,3}/g).join('-');
  document.getElementById(element.id).value = finalVal;
}
<input type="text" class="form-control" name="sector" id="sector" onkeyup="addDash(this)" required>

于 2020-12-31T11:47:02.357 回答
1

在我上面回答的所有其他人都是正确的，他们的代码绝对简短而整洁，但有点先进，因为他们要么使用正则表达式，要么使用插件。类似的事情也可以通过基本的 js/jquery 来实现，从您尝试实现的示例代码来看。由于这个问题大约有 3 年的历史，你现在一定已经得到了你想要的东西，但是是的，你已经接近了。这就是你应该尝试的：

$('.creditCardText').keyup(function() {
  var cctlength = $(this).val().length; // get character length

  switch (cctlength) {
    case 4:
      var cctVal = $(this).val();
      var cctNewVal = cctVal + '-';
      $(this).val(cctNewVal);
      break;
    case 9:
      var cctVal = $(this).val();
      var cctNewVal = cctVal + '-';
      $(this).val(cctNewVal);
      break;
    case 14:
      var cctVal = $(this).val();
      var cctNewVal = cctVal + '-';
      $(this).val(cctNewVal);
      break;
    default:
      break;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" class="creditCardText" maxlength="19" />

JSFiddle 链接

于 2015-08-13T11:23:40.417 回答
0

您可以使用 vanilla JS 来实现，并且不需要插件来做到这一点。请参阅下面的代码。您可以更改var split以适合您的需要。归功于https://webdesign.tutsplus.com/tutorials/auto-formatting-input-value--cms-26745。

(function($, undefined) {

    "use strict";

    // When ready.
    $(function() {
        
        var $form = $( "#form" );
        var $input = $form.find( "input" );

        $input.on( "keyup", function( event ) {
            
            console.log('sss')
            // When user select text in the document, also abort.
            var selection = window.getSelection().toString();
            if ( selection !== '' ) {
                return;
            }
            
            // When the arrow keys are pressed, abort.
            if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
                return;
            }
            
            var $this = $(this);
            var input = $this.val();
                    input = input.replace(/[\W\s\._\-]+/g, '');
                
                var split = 4;
                var chunk = [];
               
                for (var i = 0, len = input.length; i < len; i += split) {                              chunk.push( input.substr( i, split ) );
                }

                 console.log(chunk)
                $this.val(function() {
                    return chunk.join("-");
                });
        
        } );
        
        /**
         * ==================================
         * When Form Submitted
         * ==================================
         */
        $form.on( "submit", function( event ) {
            
            var $this = $( this );
            var arr = $this.serializeArray();
        
            for (var i = 0; i < arr.length; i++) {
                    arr[i].value = arr[i].value.replace(/[($)\s\._\-]+/g, ''); // Sanitize the values.
            };
            
            console.log( arr );
            
            event.preventDefault();
        });
        
    });
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" method="post" action="">

        <label for="number">Enter number</label>
        <div class="flex">
            <input id="number" name="number" type="text" maxlength="15" />
        </div>

</form>

于 2019-03-25T13:42:43.057 回答