Javascript 在输入中每四个字符后插入破折号

我想在输入的每四个字符后插入一个破折号。我有一个信用卡输入框。当用户键入并达到每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);

    }
}

});

$（'.creditCardText'）.keyup（函数（）{
var cardValue=$（'.creditCardText'）.val（），
cardLength=cardValue.length；
如果（卡片长度<5）{
如果（cardLength%4==0）{
console.log（'4 lük geldi'）；
cardValue+=“-”；
$（'.creditCardText'）.val（cardValue）；
}
}否则{
如果（cardLength%5==0）{
console.log（'5lük geldi'）；
cardValue+=“-”；
$（'.creditCardText'）.val（cardValue）；
}
}
});

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

只要您已经在使用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);
});

---

此jquery扩展将每四个字符插入一个空格：

通过修改@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;
  }

});

---

我上面回答的所有其他人都是对的，他们的代码绝对简短整洁，但有点超前，因为他们要么使用正则表达式，要么使用插件。从您试图实现的示例代码来看，基本js/jquery也可以实现类似的功能。因为这个问题已经问了3年了，你现在一定已经得到了你想要的，但是是的，你已经接近了。。这是您应该尝试的：

    //Html
    /* <input type="text" class="creditCardText" maxlength="19" /> */
    $('.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;
     }
  });

//Html
/*  */
$（'.creditCardText'）.keyup（函数（）{
var cctlength=$（this）.val（）.length；//获取字符长度
开关（cctlength）{
案例4：
var cctVal=$（this.val（）；
var cctNewVal=cctVal+'-'；
$（this.val）（cctNewVal）；
打破
案例9：
var cctVal=$（this.val（）；
var cctNewVal=cctVal+'-'；
$（this.val）（cctNewVal）；
打破
案例14：
var cctVal=$（this.val（）；
var cctNewVal=cctVal+'-'；
$（this.val）（cctNewVal）；
打破
违约：
打破
}
});

基于@think123 answer，使用香草JS，不带JQuery：

---

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

如果您正在寻找纯Javascript解决方案，请看下面我的函数。它支持美国运通格式（15位）以及Visa、MasterCard和其他格式（16位）

注意那些简单的解决方案，它们会取代整个值，并且总是将焦点放在输入的末尾：如果用户编辑他以前输入的内容，这可能会很烦人

演示：

input\u credit\u card=功能（输入）
{
var format_和_pos=函数（字符，退格）
{
var start=0；
var-end=0；
var-pos=0；
var分隔符=“-”；
var值=输入值；
如果（字符！==false）
{
开始=输入。选择开始；
结束=输入。选择结束；
if（backspace&&start>0）//处理backspace onkeydown
{
开始--；
if（值[开始]==分隔符）
{开始--；}
}
//如果有选择，则能够替换该选择
value=value.substring（0，开始）+char+value.substring（结束）；
pos=start+char.length；//插入符号位置
}
var d=0；//数字计数
var dd=0；//总计
var gi=0；//组索引
var newV=“”；
var groups=/^\D*3[47]/.测试（值）？//检查美国运通
[4, 6, 5] : [4, 4, 4, 4];
对于（变量i=0；ii）
{pos--；}
}
其他的
{
如果（d==组[gi]）
{
newV+=分离器；
d=0；
gi++；
如果（开始>=i）
{pos++；}
}
newV+=值[i]；
d++；
dd++；
}
如果（d==gr
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_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'));

<input type="text" class="form-control" name="sector" id="sector" onkeyup="addDash(this)" required>

<script>
    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;
    }
</script>