Auto Jump Fields In AngularJS

Question

I have a row in my form for a user to enter a 6 digit unique ref. This is split up into 3 fields which each only allow 2 characters. What i'm after is that when the user has entered 2 characters, I want the focus to automatically move to the next field.

The functionality though also needs to support the use of tab back in case the user has entered an incorrect digit so they don't need to manually click in the field.

HTML

<div class="col-sm-5 form-inline">
    <input name="RefBox1" type="text" class="form-control" id="RefBox1" style="width: 40px;" type="text" maxlength="2" ng-model="updateRef1" restrictinput="[^0-9\s]" required> &nbsp;-&nbsp;
    <input name="RefBox2" type="text" class="form-control" id="RefBox2" style="width: 40px;" type="text" maxlength="2" ng-model="updateRef2" restrictinput="[^0-9\s]" required> &nbsp;-&nbsp;
    <input name="RefBox3" type="text" class="form-control" id="RefBox3" style="width: 40px;" type="text" maxlength="2" ng-model="updateRef3" restrictinput="[^0-9\s]" required>
</div>

As I don't know how to do this I don't have any code in my controller.

score 2 · Accepted Answer · edited May 23 '17 at 10:26

This method of moving to the nextElementSibling on maxLength works with plain-old-javascript. I'm guessing that you could adapted it to your AngularJS controller. And to support older browsers (IE<9) see: Portability of nextElementSibling/nextSibling

<html>
<body>
<input onKeyup="autoTab(this)" maxlength=2>
<input onKeyup="autoTab(this)" maxlength=2>
<input onKeyup="autoTab(this)" maxlength=2>

<script type="text/javascript">

function autoTab( obj ) {
    if ( obj.value.length >= obj.maxLength && obj.nextElementSibling ) 
        obj.nextElementSibling.focus(); 
}
</script>
</body>
</html>

Auto Jump Fields In AngularJS

1 Answers1