在输入中每 4 个字符后插入短划线

我非常喜欢这个自动格式化插件：这里。

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

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

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

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

此外，您可以在面具中使用?字符来适应不同长度或格式的信用卡。例如，要接受 14 位和 16 位数字的输入，请执行以下操作：

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

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

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

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

我建议您将可能的输入限制为合理，因为肯定没有 1000 位长信用卡这样的东西。 但是，如果您真的想要该功能，则必须自己编写脚本或找到另一个插件。截至目前，我不知道一个。

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

$('.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上查看

基于@think123答案，在原版 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的，但我认为这个答案也会有所帮助。

如果你正在寻找一个纯粹的Javascript解决方案，看看下面的我的函数。它支持美国运通格式(15位(以及Visa，万事达卡和其他(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上查看

通过修改@think123和@TheStoryCoder的建议，我为光标添加了选择开始和选择结束。之后，在合适的位置增加光标位置并修改光标位置。它应该解决光标位置与预期位置不符的问题。

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

最简单的方法是使用简单的 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>

所有在我上面回答的人都是对的，他们的代码绝对简短而整洁，但有点先进，因为他们要么使用正则表达式，要么使用插件。像这样的事情也可以用基本的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 Link

您可以使用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>