angular input回车事件

最新推荐文章于 2025-05-23 09:00:06 发布

原创最新推荐文章于 2025-05-23 09:00:06 发布 · 8.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #angular

web前端同时被 2 个专栏收录

143 篇文章

订阅专栏

Angular

18 篇文章

订阅专栏

这篇博客展示了如何在AngularJS应用中捕获输入框的回车事件，并在用户按下回车键时调用特定的方法。通过ng-keyup指令监听键盘事件，当检测到回车键（keycode为13）时，执行自定义的myClick方法，将输入框的值添加到列表中，同时确保列表中不包含重复项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myctrl">
    <input type="text" ng-model="textmodel" ng-keyup="mykey($event)"/>
    <ul>
    <li ng-repeat="x in list1 ">
    {{x}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.controller('myctrl', function ($scope) {
    $scope.list1 = ['1', '2', '3'];
    $scope.mykey = function (e) {
        var keycode = window.event ? e.keyCode : e.which;//获取按键编码
        if (keycode == 13) {
            $scope.myClick();//如果等于回车键编码执行方法
        }
    }
    $scope.myClick = function(){
        if(!arrindex($scope.list1,$scope.textmodel)){//不重复添加
            $scope.list1.push($scope.textmodel);
        }
    };
})
function arrindex(arr, obj) {//判断是否重复
    var i = arr.length;
    while (i--) {
        if (arr[i] === obj) {
            return true;
        }
    }
    return false;
}
</script>
</body>
</html>