个人中心
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
文章推荐： r - 在 lme 模型拟合中提取每个单元的系数及其标准误差
文章推荐： maven - Jenkins CI : Where and how store configuration files?
文章推荐： qt - 如何在 qml 的 ListModel 中找到特定的 ListElement？
文章推荐： momentjs - 如何解析UTC中的日期时间？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com