Question

我的表单中有一行供用户输入6位数的唯一参考号。这被分成3个字段，每个字段只允许2个字符。我所追求的是当用户输入2个字符时，我希望焦点自动移动到下一个字段。

如果用户输入的数字不正确，他们也需要支持使用标签，这样他们就不需要手动点击该字段了。

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>

由于我不知道如何操作，我的控制器中没有任何代码。

Answer 1

这种在maxLength上移动到nextElementSibling的方法适用于plain-old-javascript。我猜你可以将它改编成你的AngularJS控制器。并且为了支持旧浏览器（IE＆lt; 9），请参阅：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>

AngularJS中的自动跳转字段

1 个答案: