我可以在插入时为信用卡号字段每 4 个数字添加破折号吗？答案

【问题标题】：Can I add dashes every 4 numbers for credit card number field in insert time [duplicate]我可以在插入时为信用卡号字段每 4 个数字添加破折号吗？
【发布时间】：2017-12-26 11:41:14
【问题描述】：

帮助我在插入时在文本框字段中设置信用卡号格式 1111-1111-1111-1111。

 <div class="form-group">
        <label>Card Number</label>
        <input type="text" class="form-control" placeholder="xxxx-xxxx-xxxx-xxxx" name="card-number" id="credit-card" value="" >
    </div>
    <div class="form-group center-block">
        <input type="button" name="btn-update" id="btn-update" value="UPDATE" class="btn">
 </div>

【问题讨论】：

你在用jquery吗？
使用oninput事件跟踪用户输入，然后使用逻辑插入-/
SO 不是“为我工作”服务。使用您首选的搜索提供程序来查找可以完成这项工作的众多库之一。
检查这个 - stackoverflow.com/questions/36833366/format-credit-card-number
@Bhaskar。谢谢...

标签： javascript php

【解决方案1】：

如果你使用的是 jquery

$('.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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="creditCardText" value="1234-1234-1234-1234" />

【讨论】：

对我很有帮助。谢谢。

【解决方案2】：

使用onkeyup Event，您可以跟踪用户输入的字符数。

function formatCreditCard() {
    var x = document.getElementById("credit-card");
    var index = x.value.lastIndexOf('-');
    var test = x.value.substr(index + 1);
    if (test.length === 4)
         x.value = x.value + '-';
}

<div class="form-group">
        <label>Card Number</label>
        <input type="text" class="form-control" onkeyup="formatCreditCard()" placeholder="xxxx-xxxx-xxxx-xxxx" name="card-number" id="credit-card" value="" >
    </div>
    <div class="form-group center-block">
        <input type="button" name="btn-update" id="btn-update" value="UPDATE" class="btn">
    </div>

【讨论】：

感谢您的努力...
使用 (test.length === 4 && x.value.length

【解决方案3】：

您可以像这样拥有自己的自定义逻辑：

$('input[name=card-number]').keypress(function(){
 var rawNumbers = $(this).val().replace(/-/g,'');
 var cardLength = rawNumbers.length;
 if(cardLength !==0 && cardLength <=12 && cardLength % 4 == 0){
   $(this).val($(this).val()+'-');
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
        <label>Card Number</label>
        <input type="text" class="form-control" placeholder="xxxx-xxxx-xxxx-xxxx" name="card-number" id="credit-card" value="" maxlength="19" >
    </div>
    <div class="form-group center-block">
        <input type="button" name="btn-update" id="btn-update" value="UPDATE" class="btn">
    </div>

【讨论】：

【解决方案4】：

var txtCardNumber = document.querySelector("#txtCardNumber");
txtCardNumber.addEventListener("input", onChangeTxtCardNumber);

function onChangeTxtCardNumber(e) {     
    var cardNumber = txtCardNumber.value;

      // Do not allow users to write invalid characters
    var formattedCardNumber = cardNumber.replace(/[^\d]/g, "");
    formattedCardNumber = formattedCardNumber.substring(0, 16);

    // Split the card number is groups of 4
    var cardNumberSections = formattedCardNumber.match(/\d{1,4}/g);
    if (cardNumberSections !== null) {
        formattedCardNumber = cardNumberSections.join('-'); 
    }

    console.log("'"+ cardNumber + "' to '" + formattedCardNumber + "'");

    // If the formmattedCardNumber is different to what is shown, change the value
    if (cardNumber !== formattedCardNumber) {
        txtCardNumber.value = formattedCardNumber;
    }
}

HTML 代码

<input id="txtCardNumber"/>

【讨论】：

【解决方案5】：

试试这个，

<!doctype html>
<html>
<body>
    <form>
        <input id="cc" value="" placeholder="1234 1234 1234 1234">
    </form>
    <p>Type some sample credit card numbers in the box above and it should
    automatically format it nicely.</p>
    <script>
        function cc_format(value) {
            var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
            var matches = v.match(/\d{4,16}/g);
            var match = matches && matches[0] || ''
            var parts = []
            for (i=0, len=match.length; i<len; i+=4) {
                parts.push(match.substring(i, i+4))
            }
            if (parts.length) {
                return parts.join('-')
            } else {
                return value
            }
        }

        onload = function() {
            document.getElementById('cc').oninput = function() {
                this.value = cc_format(this.value)
            }
        }
    </script>
</body>
</html>

【讨论】：