AngularJS中的自动跳转字段

Auto Jump Fields In AngularJS

本文关键字：字段 AngularJS      更新时间：2023-09-26

我在我的表单中有一行用户输入6位唯一ref.这被分成3个字段，每个字段只允许2个字符。我想要的是，当用户输入2个字符时，我希望焦点自动移动到下一个字段。

该功能还需要支持tab back的使用，以防用户输入错误的数字，这样他们就不需要手动点击字段

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

因为我不知道怎么做，所以我的控制器中没有任何代码

在maxLength上移动到nextElementSibling的方法适用于plain-old-javascript。我猜你可以把它改编成你的AngularJS控制器。要支持较旧的浏览器(IE<9)，请参阅: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>
相关文章：