如何使用 angularjs 更改回车键的行为答案

【问题标题】：How can i change the behavior of the enter key with angularjs如何使用 angularjs 更改回车键的行为
【发布时间】：2015-11-16 09:33:29
【问题描述】：

不重复

我有一个输入、一个按钮和另一个按钮来切换高级搜索的搜索：

<form role="form">
  <div class="form-group ">
  <input type="text" id="search-input" ng-model="searchTerm" autocomplete="off" autofocus ng-keydown="onKeyDownEnter($event)" />
    <div class="btn-group " >
      <button type="button" ng-click="search()" class="btn btn-default">Submit</button> 
      <button class="btn dropdown-toggle  downArrow" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Desplegar menú</span>
      </button>
        <div id="subMenu" class="dropdown-menu advanced-search"> 
          <div class="form-group">
            <label for="usr">Find documents with...</label>
            <input type="text" class="form-control" ng-model="adSearch.q1">
          </div>
          <div class="form-group">
            <label for="usr">And</label>
            <input type="text" class="form-control" ng-model="adSearch.q2">
          </div>
          <div class="form-group">
            <label for="usr">Or</label>
            <input type="text" class="form-control" ng-model="adSearch.q3">
          </div>
          <div class="form-group">
            <label for="usr">Not</label>
            <input type="text" class="form-control" ng-model="adSearch.q4">
          </div> 
      </div>  
    </div>
  </div>
</form>

当我按下回车键时，高级搜索的按钮会采取行动。我想知道当我按回车键时，我可以对正常搜索（第一个按钮）采取什么行动。

我不想使用 jquery 或 javascript，我需要用 angularjs 来做，我认为我可以只用 css 来做，但似乎我做不到。

我可以用这个：

 $scope.onKeyDownEnter = function($event){
  if ($event.keyCode === 13) {
    console.log("yeeeee");
  }
};

但这也切换了“子菜单”，我不知道当我按下回车键时如何禁用该“子菜单”的行为。

额外信息：

Here i have the subMenu before press enter key

Here i have the subMenu after press enter key

【问题讨论】：

Trigger a button click with JavaScript on the Enter key in a text box的可能重复
您不能将表单相互嵌套，这是无效的 HTML。
不是重复的，我忘了说我需要在 Angularjs 中做，因为我认为我只需要 css 来解决这个问题。
我不知道我不能嵌套表格，但感谢您提供的信息，现在已解决。
@CBroe 在 HTML 中嵌套表单无效，但在 AngularJS 中，ng-form directive 可以用作<form> 标签的可嵌套别名。

标签： angularjs html twitter-bootstrap

【解决方案1】：

我不知道为什么这段代码会导致这个问题：

<button class="btn dropdown-toggle  downArrow" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Desplegar menú</span>
  </button>

如果你有这个问题，只需像这样添加 type="button"：

<button type="button" class="btn dropdown-toggle  downArrow" data-toggle="dropdown">
          <span class="caret"></span>
          <span class="sr-only">Desplegar menú</span>
        </button>

一切都会好起来的

【讨论】：

【解决方案2】：

由于您在搜索输入框中使用了autofocus，因此您可以使用 jquery 来关注您的正常搜索按钮：

$(document).ready(function(){
   $('#search-button').blur(function(){ $('#save-btn').focus(); });
});

Ps：请为您的按钮save-btn 提供 ID 以使其正常工作。

【讨论】：

我可以用 Angularjs 做类似的事情吗？
@vict：我没有看到任何可推荐的解决方案。但是如果你想坚持使用 AngularJS，你可以在元素中使用 ngFocus 和 ngBlur。在你的 js 中创建一个名为 focusToSubmit() 的函数。并将该函数赋予的 ng-blur 属性。在 focusToSubmit() 函数中，您可以调用 .focus() 以获得普通的提交按钮。
是的，我已经尝试过了，但我不知道如何捕捉事件按键任何解决方案@Jimish？
是的，您可以在 <input> 元素中使用“onkeypress”属性。执行以下操作：并在该函数中使用 event.keyCode == 13 如果输入是否被按下。
但是这里的问题是我也有下拉菜单，所以如果我这样做，我会按下按钮并切换菜单。

【解决方案3】：

您是否尝试应用焦点？像这样：

$('#myButton').focus();

【讨论】：