Question

我的页面上有四个输入类型编号字段。每当使用AngularJS输入单个数字（最大数字）时，我想将焦点更改为最接近的下一个输入。

我是新手，但我已将控制器挂在视图上。

<input type="number" ng-model="digit_one" ng-change="digitChange()" ng-maxlength="1" maxlength="1" />
...
digit_two, three and four.

编辑：

每当用户点击＆＃34;退格＆＃34;我希望重点回到最近的输入。

 <ul ng-show="codeInput" class="col">
                <li class="four">
                    <input custom type="number" ng-model="digit_one" ng-maxlength="1" ng-minlength="1" maxlength="1" select-on-click />
                </li>
                <li class="four">
                    <input custom type="number" ng-model="digit_two" ng-maxlength="1" ng-minlength="1" maxlength="1" select-on-click />
                </li>
                <li class="four">
                    <input custom type="number" ng-model="digit_three" ng-maxlength="1" ng-minlength="1" maxlength="1" select-on-click />
                </li>
                <li class="four">
                    <input custom type="number" ng-model="digit_four" ng-maxlength="1" ng-minlength="1" maxlength="1" select-on-click />
                </li>

app.directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel'],
        link: function (scope, element, attrs, ctrls) {
            var model = ctrls[0], form = ctrls[1];

            scope.next = function () {
                return model.$valid
            }

            scope.$watch(scope.next, function (newValue, oldValue) {
                if (newValue && model.$dirty) {
                    var nextinput = element.next('input');
                    if (nextinput.length === 1) {
                        nextinput[0].focus();
                    }
                }
            })
        }
    }
}]);

非常感谢帮助。

由于

Answer 1

你可以创建一个自定义指令。（这只是前面部分）

<div ng-app="app">
    <form>
        <input ng-model="test1" type="text" custom ng-minlength="3" /> 
        <input ng-model="test2" type="text" custom ng-minlength="3" /> 
        <input ng-model="test3" type="text" custom ng-minlength="3" />
    </form>
</div>


angular.module('app', [])
.directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel'],
        link: function(scope, element, attrs, ctrls) {
            var model=ctrls[0], form=ctrls[1];

            scope.next = function(){
                return model.$valid
            }

            scope.$watch(scope.next, function(newValue, oldValue){
                if (newValue && model.$dirty)
                {
                    var nextinput = element.next('input');
                    if (nextinput.length === 1)
                    {
                        nextinput[0].focus();
                    }
                }
            })
        }
    }
}])

<强> DEMO

AngularJS改变焦点

编辑：

1 个答案: