如何将分隔字符串粘贴到多个字段（例如信用卡）

Question

我在 angular 中有一个表格，其中一行有 3 个标准输入字段（文本），它们共同构成了一个兑换码（如信用卡号）。

我们无法弄清楚如何允许用户将完整代码粘贴到第一个字段并填充所有 3 个字段。例如代码 'xx xxxx xxxx'

Answer 1

您可以对货币、日期、卡号、电话号码等使用jquery input mask。

  $(function() {
    $('.card_number').mask('000 0000 0000');    
  });

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/bootstrap.min.js"></script>
<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>


<input type="text" class="card_number">

Answer 2

使用 jQuery 您可以执行以下操作

<form>
    <input type="text" id="tb0" />
     <input type="text" id="tb1" />
     <input type="text" id="tb2" />
    <input type="text" id="tb3" />
</form>

$('#tb0').on('paste',function(){
 var element = this;
  setTimeout(function () {
    var splittedString = $('#tb0').val().match(/.{1,4}/g)
    for(var i=0; i<splittedString.length; i++){
        $('#tb' + i).val(splittedString[i]);
    }
  }, 0);
})

见fiddle

如何将分隔字符串粘贴到多个字段（例如信用卡）

how to paste a delimited string into multiple fields (eg credit card)

javascript

angularjs

html

forms

credit-card