gpt4 book ai didi

angularjs - 仅使用 angularjs 和 jqlite 使用回车键作为选项卡

转载 作者:行者123 更新时间:2023-12-04 13:59:54 25 4
gpt4 key购买 nike

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

我有一个带输入的 ng-repeat。所有需要发生的是,当用户按下 Enter 键时,它应该将焦点转移到下一个输入,基本上模拟 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', age: 1 },
{ 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 的链接: fiddle

最佳答案

好的,所以我想通了。毕竟没有那么难。刚刚陷入了“在使用 Angular 时不要考虑 jQuery”的心态。

这是我实现的指令:

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

这是工作 fiddle 的链接: enter-as-tab

关于angularjs - 仅使用 angularjs 和 jqlite 使用回车键作为选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26278711/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com