使用AngularJS按Enter键提交表单

11 回答

• 5

  使用ng-submit并将两个输入包装在单独的表单标记中：

  <div ng-controller="mycontroller">
  
    <form ng-submit="myFunc()">
      <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
    </form>
  
    
  
  
    <form ng-submit="myFunc()">
      <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
    </form>
  
  </div>
  

  将每个输入字段包装在自己的表单标记中允许ENTER在任一表单上调用提交 . 如果您为两者使用一个表单标记，则必须包含提交按钮 .

  回复于 2024-04-29T01:33:58+08:00
• 23

  使用CSS类而不是重复内联样式会稍微整洁一些 .

  CSS

  input[type=submit] {
      position: absolute;
      left: -9999px;
  }
  

  HTML

  <form ng-submit="myFunc()">
      <input type="text" ng-model="name" />
      
  
      <input type="text" ng-model="email" />
      <input type="submit" />
  </form>
  

  回复于 2024-04-29T01:33:58+08:00
• 189

  FWIW - 这里's a directive I' ve用于基本确认/警报引导模式，无需 <form>

  （只需为你喜欢的内容切换jQuery点击动作，并将 data-easy-dismiss 添加到你的模态标签中）

  app.directive('easyDismiss', function() {
      return {
          restrict: 'A',
          link: function ($scope, $element) {
  
              var clickSubmit = function (e) {
                  if (e.which == 13) {
                      $element.find('[type="submit"]').click();
                  }
              };
  
              $element.on('show.bs.modal', function() {
                  $(document).on('keypress', clickSubmit);
              });
  
              $element.on('hide.bs.modal', function() {
                  $(document).off('keypress', clickSubmit);
              });
          }
      };
  });
  

  回复于 2024-04-29T01:33:58+08:00
• 507

  Angular支持开箱即用 . 你在表单元素上试过ngSubmit吗？

  <form ng-submit="myFunc()" ng-controller="mycontroller">
     <input type="text" ng-model="name" />
      
  
      <input type="text" ng-model="email" />
  </form>
  

  编辑：根据有关提交按钮的评论，请参阅Submitting a form by pressing enter without a submit button，它给出了以下解决方案：

  <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
  

  如果你不需要将控制器功能绑定到Enter键或键盘事件 . 这通常需要一个自定义指令，但AngularUI库已经设置了一个很好的keypress解决方案 . 见http://angular-ui.github.com/

  添加angularUI lib后，您的代码将类似于：

  <form ui-keypress="{13:'myFunc($event)'}">
    ... input fields ...
  </form>
  

  或者您可以将Enter键压缩到每个单独的字段 .

  另外，请参阅此SO问题以创建简单的keypres指令：How can I detect onKeyUp in AngularJS?

  编辑（2014-08-28）：在撰写本答案时，ng-keypress / ng-keyup / ng-keydown在AngularJS中不作为本机指令存在 . 在下面的评论中，@ darlan-alves有一个非常好的解决方案：

  <input ng-keyup="$event.keyCode == 13 && myFunc()"... />

  回复于 2024-04-29T01:33:58+08:00
• 279

  如果要在没有表单的情况下调用函数，可以使用我的ngEnter指令：

  Javascript ：

  angular.module('yourModuleName').directive('ngEnter', function() {
          return function(scope, element, attrs) {
              element.bind("keydown keypress", function(event) {
                  if(event.which === 13) {
                      scope.$apply(function(){
                          scope.$eval(attrs.ngEnter, {'event': event});
                      });
  
                      event.preventDefault();
                  }
              });
          };
      });
  

  HTML ：

  <div ng-app="" ng-controller="MainCtrl">
      <input type="text" ng-enter="doSomething()">    
  </div>
  

  我在my twitter和我的gist account上提交了其他令人敬畏的指令 .

  回复于 2024-04-29T01:33:58+08:00
• 14

  如果您只有一个输入，则可以使用表单标记 .

  <form ng-submit="myFunc()" ...>
  

  如果您有多个输入，或者不想使用表单标记，或者想要将回车键功能附加到特定字段，则可以将其内联到特定输入，如下所示：

  <input ng-keyup="$event.keyCode == 13 && myFunc()" ...>
  

  回复于 2024-04-29T01:33:58+08:00
• 0

  我想要一些比给定答案更具扩展性/语义性的东西，所以我写了一个指令，它以类似于内置_1391102的方式获取javascript对象：

  HTML

  <input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>
  

  在指令范围的上下文中评估对象的值 - 确保它们被单引号括起来，否则在加载指令时将执行所有函数（！）

  例如： esc : 'clear()' 而不是 esc : clear()

  Javascript

  myModule
      .constant('keyCodes', {
          esc: 27,
          space: 32,
          enter: 13,
          tab: 9,
          backspace: 8,
          shift: 16,
          ctrl: 17,
          alt: 18,
          capslock: 20,
          numlock: 144
      })
      .directive('keyBind', ['keyCodes', function (keyCodes) {
          function map(obj) {
              var mapped = {};
              for (var key in obj) {
                  var action = obj[key];
                  if (keyCodes.hasOwnProperty(key)) {
                      mapped[keyCodes[key]] = action;
                  }
              }
              return mapped;
          }
  
          return function (scope, element, attrs) {
              var bindings = map(scope.$eval(attrs.keyBind));
              element.bind("keydown keypress", function (event) {
                  if (bindings.hasOwnProperty(event.which)) {
                      scope.$apply(function() {
                           scope.$eval(bindings[event.which]);
                      });
                  }
              });
          };
      }]);
  

  回复于 2024-04-29T01:33:58+08:00
• 32

  另一种方法是使用ng-keypress，

  <input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return">
  

  Submit an input on pressing Enter with AngularJS - jsfiddle

  回复于 2024-04-29T01:33:58+08:00
• 0

  非常好，干净，简单的指令与转移输入支持：

  app.directive('enterSubmit', function () {
      return {
          restrict: 'A',
          link: function (scope, elem, attrs) {
              elem.bind('keydown', function(event) {
                   var code = event.keyCode || event.which;
                   if (code === 13) {
                         if (!event.shiftKey) {
                              event.preventDefault();
                              scope.$apply(attrs.enterSubmit);
                         }
                   }
              });
          }
      }
  });
  

  回复于 2024-04-29T01:33:58+08:00
• 1

  If you want data validation too

  <!-- form -->
  <form name="loginForm">
  ...
    <input type="email" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="email"... />
    <input type="password" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="password"... />
  </form>
  

  这里重要的补充是 $loginForm.$valid ，它将在执行函数之前验证表单 . 您将不得不为验证添加其他属性，这超出了本问题的范围 .

  祝好运 .

  回复于 2024-04-29T01:33:58+08:00
• 2

  只是想指出，在有一个隐藏的提交按钮的情况下，您可以使用ngShow指令并将其设置为false，如下所示：

  HTML

  <form ng-submit="myFunc()">
      <input type="text" name="username">
      <input type="submit" value="submit" ng-show="false">
  </form>
  

  回复于 2024-04-29T01:33:58+08:00