Вызов метода при нажатии клавиши "Enter"

Ответ 1

Я написал ниже упомянутую директиву и работает.

Директива:

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>

Ответ 2

Попробуйте следующее:

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

На уровне формы вы можете использовать это:

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

Ответ 3

Что вам нужно сделать, это привязать вашу функцию к событию отправки, а не вводить ключ. Вы не должны сосредотачиваться на вводе, потому что, например, на iPhone есть кнопка клавиатуры для выполнения формы, которая ведет себя как ввод, но не вводит событие... и iPhone - всего лишь один пример: D

Итак, вы должны изменить свой <button> на вход <type="submit"/> Таким образом enter key автоматически запустит событие отправки формы.

Затем в вашем событии отправки return false;, чтобы предотвратить действие HTML (которое отправляет форму) и выполнить ваш код.

HTML

<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>

JS

$('form').submit(function () {
    MyFunc();
    return false;
});

Надеюсь, это ответит на ваш вопрос.

PS: вы можете использовать ng-submit вместо jQuery-селектора, если вы не хотите использовать jQuery.

Ответ 4

Большинство ответов здесь связаны с дополнительными обходными решениями, которые просто не нужны, вы можете работать со стандартным представлением формы, сделав эти две небольшие изменения, и клавиша 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>

Ответ 5

Я нашел решение, которое не требует директивы. Я уже использовал 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 предназначено только для клавиши ввода.

SCRIPT

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

Когда значение $ event не равно NULL, это клавиша ввода, мы вызываем protectDefault() и не обрабатываем дальше. Когда $ event имеет значение null, это действительный ключ, и мы передаем его в vm.showResults() для обработки.

Ответ 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();
}

Ответ 7

Этот пример работал для меня:

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/