input绑定enter事件跳转

一时失言乱红尘 2022-06-01 20:10 232阅读 0赞

绑定dom元素enter事件有两种方法，个人推荐第二种

**方法一：由于没有ngEnter指令，所以可以自己扩展一个(转载）**

指令代码如下：

'use strict';
    
    define(function (require, exports, module) { 
        module.exports = function (ngModule) { 
            ngModule.register.directive('ngEnter', function () { 
                return {
                    restrict: 'A',
                    require: '?ngModel',
                    link: function ($scope, element, attrs, controller) { 
                        element.bind("keydown keypress", function (event) { 
                            if(event.which === 13) {
                                $scope.$apply(function (){ 
                                    $scope.$eval(attrs.ngEnter);
                                });
                                event.preventDefault();
                            }
                        });
                    }
                }
            });
        }
    });
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22

**方法二：自己在项目中的使用**

**js：**

**scope.goPages = function(e) \{  
var keycode = window.event ? e.keyCode : e.which;  
if (keycode == 13) \{  
你要写实现的事件  
\}  
event.preventDefault();  
\};**

**html：**

**<input type="text" placeholder="跳转" οnfοcus="this.placeholder=''" οnblur="this.placeholder='跳转'" ng-model="current" ng-keyup="goPages($event)"/>**

**方法三：用ng-keypress指令：（转载）**

**<input class="add-inner-input"id="name" placeholder="回车添加，设置日期点右侧" ng-keypress="($event.which === 13)?addTask():0"/>**