AngularJS iOS端：如何捕获点击DONE按钮关闭键盘的事件

这个需求我之前做移动端AngularJS项目时也碰到过，确实AngularJS自带的ng-keypress搞不定——因为Done按钮触发的是回车这类非打印字符的按键事件，ng-keypress只监听可打印字符，所以抓不到。而ng-blur又太宽泛，连点击页面其他地方失焦都会触发，完全不符合你的需求。不过有两个实用的办法可以解决：

方案一：用ng-keyup监听回车事件 #

大多数移动端键盘的Done按钮，本质上是映射到**回车键（keyCode 13）**的，部分安卓键盘可能会用keyCode 66。我们可以直接用ng-keyup监听按键抬起事件，然后判断对应的keyCode：

模板代码 #

<input type="text" ng-keyup="handleDoneButton($event)">

控制器代码 #

angular.module('yourApp').controller('YourController', function($scope) {
  $scope.handleDoneButton = function(event) {
    // 兼容iOS（13）和部分安卓键盘（66）的Done按键码
    const doneKeyCodes = [13, 66];
    if (doneKeyCodes.includes(event.keyCode)) {
      // 这里写你点击Done后的业务逻辑
      console.log('用户点击了Done按钮，键盘即将关闭');
      // 如果需要主动收起键盘，可以手动触发blur
      event.target.blur();
    }
  };
});

这个方案的好处是简单直接，不需要额外写指令，适合快速实现需求。

方案二：自定义可复用的on-done指令 #

如果你的项目里多个输入框都需要这个功能，写个自定义指令会更方便复用：

指令代码 #

angular.module('yourApp').directive('onDone', function() {
  return {
    restrict: 'A', // 属性型指令
    link: function(scope, element, attrs) {
      // 监听输入框的keyup事件
      element.on('keyup', function(event) {
        const doneKeyCodes = [13, 66];
        if (doneKeyCodes.includes(event.keyCode)) {
          // 触发指令绑定的表达式，需要用$apply触发AngularJS的脏检查
          scope.$apply(function() {
            scope.$eval(attrs.onDone);
          });
        }
      });
    }
  };
});

使用方式 #

<!-- 在输入框上绑定指令，指定触发的方法 -->
<input type="text" on-done="handleDoneAction()">

控制器方法 #

$scope.handleDoneAction = function() {
  // 执行你的业务逻辑
};

补充说明 #

• 为什么ng-keypress不行？因为keypress事件只针对可打印字符，回车、Done这类属于控制字符，不会触发keypress，所以必须用keyup或keydown。
• 如果是Cordova这类混合应用，还可以用键盘插件专门监听键盘收起事件，但纯Web场景用上面的方法就足够了。

内容的提问来源于stack exchange，提问作者24sharon