Question

<form novalidate name="frm1" autocomplete="off">

   //UI elements                               

   <div class="col-sm-3 col-sm-offset-6">
      <button ng-click="MyFunc()">Next Step</button>
   </div>
 </form>

点击MyFunc()时，您能告诉我如何触发enter key方法。在上面的表单中没有提交按钮。提前谢谢。

Answer 1

试试这个：

<input ng-keyup="$event.keyCode == 13 ? MyFunc() : null" >

在表单级别，您可以使用：

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

Answer 2

我写了下面提到的指令并且它有效。

指令：

angular.module('app.directives')
    .directive('ngEnter', function () { //a directive to 'enter key press' in elements with the "ng-enter" attribute

        return function (scope, element, attrs) {

            element.bind("keydown keypress", function (event) {
                if (event.which === 13) {
                    scope.$apply(function () {
                        scope.$eval(attrs.ngEnter);
                    });

                    event.preventDefault();
                }
            });
        };
    })

<强> HTML

<form novalidate name="frm1" autocomplete="off">

   //UI elements      
 <input name="userName" type="text" ng-enter="MyFunc()"/>                         

  <div class="col-sm-3 col-sm-offset-6">
      <button ng-click="MyFunc()">Next Step</button>
   </div>
 </form>

Answer 3

您应该做的是在提交事件而不是输入键上绑定您的函数。你不应该专注于输入，因为例如在iPhone上有一个键盘按钮来执行表单，其行为类似于输入但不是输入事件...而iPhone只是一个例子：D

因此，您应该通过输入$args = array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1, 'orderby' => 'id', 'order' => 'ASC' 'tax_query' => array( array( 'taxonomy' => 'taxonomy-slug', 'field' => 'slug', 'terms' => 'taxonomy-term', ), ), ); query_posts( $args ); if ( have_posts() ) { echo '<table>'; $count= 1; while ( have_posts() ) : the_post(); echo '<tr>'; echo '<td>'.$count.'</td>'; echo '<td>'.get_the_id().'</td>'; echo '<td>'.get_the_title().'</td>'; echo '</tr>'; $count++; endwhile; echo '</table>'; } wp_reset_query();更改<button> 这样<type="submit"/>将自动触发表单提交事件。

然后在您的提交事件中enter key阻止HTML操作（发送表单）并执行您的代码。

HTML

return false;

JS

<form novalidate name="frm1" autocomplete="off">
 //UI elements                               
   <div class="col-sm-3 col-sm-offset-6">
      <input type="submit" value="Next Step" />
   </div>
 </form>

我希望这能回答你的问题。

PS：如果你不想使用jQuery，你可以使用ng-submit而不是jQuery选择器。

Answer 4

我找到了不需要指令的解决方案。我已经在使用ng-change捕获每个按键并执行搜索，但是单击Enter会使我的SharePoint页面进入编辑模式。 SharePoint不允许您访问表单标签，因此这些解决方案中的大多数对我都不起作用。

此解决方案更加简单，将代码保存在同一位置，我有一个ng-change和ng-keypress事件，它们指向同一个事件处理程序vm.txtSearchChange（）：

HTML

<input id="txtSearch" type="text" style="width: 400px;" ng-change="vm.txtSearchChange()" 
ng-keypress="$event.keyCode == 13 ? vm.txtSearchChange($event) : null" 
ng-model="vm.Search" ng-model-options="{debounce: 200}"/>

请注意ng-change事件不会传递$ event属性，而是处理合法的按键操作，而ng-keypress事件仅用于回车键。

脚本

vm.txtSearchChange = function ($event) {
  if ($event) {
    $event.preventDefault();
    return;
  }
  console.log("Search: " + vm.Search);
  vm.showResults();
}   // end vm.txtSearchChange

当$ event不为null时，它是回车键，我们调用preventDefault（），不再进一步处理。当$ event为null时，它是一个有效的密钥，我们将其传递给vm.showResults（）进行处理。

Answer 5

这里的大多数答案都涉及不需要的其他解决方法，您可以通过进行这两个小的更改来使用标准表单提交，并且Enter键将根据需要运行。

将按钮中的ng-click移动到表单，并使其成为ng-submit
在按钮

对于具有多个按钮的更复杂的表单，您可能需要尝试一些解决方法，但对于大多数情况，这将起作用。

<form novalidate name="frm1" autocomplete="off" ng-submit="MyFunc()">

   //UI elements                               

   <div class="col-sm-3 col-sm-offset-6">
      <button type="submit">Next Step</button>
   </div>
 </form>

Answer 6

<input type="text" name="Inputvalue" id="Inputvalue" ng-change="EnableDisableCheckButton()" ng-model="enteredInputValue" ng-disabled="isDisabledInputvalueTextbox" ng-blur="" data-ng-keypress="onEnterKeyPress($event)" />
<button type="button" class="btn btn-primary" ng-disabled="isDisabledCheckButton" ng-click="ValidateInputvalue()">Check</button>

在您的JavaScript文件中，添加以下内容：

  $scope.onEnterKeyPress = function (event) {
        if (event.charCode == 13) //if enter is hot then call ValidateInputvalue().
            $scope.ValidateInputvalue();
}

Answer 7

以与编写（单击）相同的方式在html文件中简单地写入（keyup.enter）=“ your_function_name（）”。下面是一个代码片段。 <input type="text" [(ngModel)]="modelSearchedData" (keyup.enter)="getModelList()">

Answer 8

这个例子对我有用：

HTML代码：

<input matInput type="text" [(ngModel)]="searchString" ng-change="startSearch()" ng-keypress="$event.keyCode == 13 ? startSearch($event) : null">

打字稿：

@HostListener('document:keypress', ['$event'])
  startSearch(event: KeyboardEvent) {
    if (event.code === "Enter") {
      //Code that you need to run
    }
  }

https://go.tiny.cloud/blog/angular-5-tutorial-step-step-guide-first-angular-5-app/

单击Enter键时触发方法

8 个答案: