使用enter键作为选项卡仅使用angularjs和jqlite

发布时间：2020-12-17 06:50:53 所属栏目：安全来源：网络整理

导读：我查看了多个线程并尝试了各种各样的解决方案. 坦率地说,我认为我正在失去理智. 我有输入的ng-repeat.所有需要发生的事情是,当用户按下回车键时,它应该将焦点转移到下一个输入,基本上模拟了Tab键功能. 代码(不完整)： HTML： body ng-app="ap" ng-controller

我查看了多个线程并尝试了各种各样的解决方案.
坦率地说,我认为我正在失去理智.

我有输入的ng-repeat.所有需要发生的事情是,当用户按下回车键时,它应该将焦点转移到下一个输入,基本上模拟了Tab键功能.

代码(不完整)：
HTML：

<body ng-app="ap" ng-controller="con"> 
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr ng-repeat='person in persons'>
        <td>
            <input type='text'
                name="personName"
                ng-model="person.name" 
            />
        </td>
        <td>
            <input type='number'
                name="personName"
                ng-model="person.age" 
                enter-as-tab
            />
        </td>
    </tr>
</table>

JS：

var app = angular.module("ap",[]);

app.controller("con",function ($scope) {

    $scope.persons = [
        { name: 'Susan',age: 1 },{ name: 'Peter',{ name: 'Jack',age: 2 }
    ];
});

app.directive('enterAsTab',function () {
    return function (scope,element,attrs) {
        element.bind("keydown keypress",function (event) {
            if(event.which === 13) {
                event.preventDefault();
                // Go to next age input                        
            }
        });
    };
});

这是一个小提琴的链接：fiddle

解决方法

好的,所以我明白了.毕竟不是那么困难.刚刚陷入了整体“在使用Angular时不要想jQuery”的心态.

这是我实施的指令：

app.directive('enterAsTab',function (event) {
            if(event.which === 13) {
                event.preventDefault();
                var elementToFocus = element.next('tr').find('input')[1];
                if(angular.isDefined(elementToFocus))
                    elementToFocus.focus();
            }
        });
    };
});

这是工作小提琴的链接：enter-as-tab

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!