我可以在插入时间中添加每4个数字的信用卡编号字段

帮助我在插入时间的文本框字段中设置1111-1111-1111-1111 1111111-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

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

使用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>

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

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

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"/>

尝试这个，

<!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>

相关内容

最新更新

热门标签：