如何将分隔的字符串粘贴到多个字段(例如信用卡)

时间:2015-08-11 16:45:32

标签: javascript angularjs html5 forms credit-card

我有一个角度的表格,连续有3个标准输入字段(文本),它们共同形成兑换码(如信用卡号)。

我们在弄清楚如何允许用户将完整代码粘贴到第一个字段并让它填充所有内容时遇到问题。例如代码'xx xxxx xxxx'

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

您可以将jquery input mask用于货币,日期,卡号,电话号码等。

&#13;
&#13;
  $(function() {
    $('.card_number').mask('000 0000 0000');    
  });
&#13;
  
&#13;
<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">
&#13;
&#13;
&#13;