1

I have a form in angular with 3 standard inputs fields (text) in a row which together form a redemption code (like a credit card number).

We are having trouble working out how allow the user to paste a full code into the first field and have it populate all 3. eg code 'xx xxxx xxxx'

Rich
  • 970
  • 2
  • 16
  • 42

2 Answers2

2

With jQuery you can do the following

<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);
})

See fiddle

Doron Sinai
  • 1,166
  • 3
  • 12
  • 28
1

You can use jquery input mask for currency,date,card number,Telephone number etc.

  $(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">
Bugfixer
  • 2,547
  • 2
  • 26
  • 42
  • I think what OP what is that he want to split the input and populate the 3 fields like credit card input forms not adding delimiters. – seenukarthi Aug 11 '15 at 17:03
  • @KarthikeyanVaithilingam - if user starts typing then. – Bugfixer Aug 11 '15 at 17:08
  • 2
    OP didn't mention, but that once the limit of the first textbox reached the focus should automatically goes to the next one and so on. – seenukarthi Aug 11 '15 at 17:10
  • currently the client is sending out the codes space delimited (xx xxxx xxxx) so pattern matching would be possible. – Rich Aug 11 '15 at 17:12