Calling a method when you press Enter

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> 

Can you tell me how to run the MyFunc() method when you press enter key . In the form above where there is no submit button. Thanks in advance.

Answer 1

I wrote the directive mentioned below and it works.

Directive:

 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 2

Try the following:

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

At the form level, you can use this:

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

Answer 3

What you need to do is bind your function to the send event, and not enter the key. You should not focus on input, because, for example, on the iPhone there is a keyboard button for executing a form that behaves like an input but does not introduce an event ... and the iPhone is just one example: D

So, you should change your <button> to the input <type="submit"/> Thus, enter key will automatically trigger the form submit event.

Then in your send event return false; to prevent the HTML action (which submits the form) and execute your code.

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; }); 

Hope this answers your question.

PS: you can use ng-submit instead of jQuery selector if you don't want to use jQuery.

Answer 4

Most of the answers here are related to additional workarounds that are simply not needed, you can work with the standard form presentation by making these two small changes, and the Enter key will work as desired.

• Move ng-click from the button to the form and make it ng-submit
• Add type = "send" to the button

For more complex forms with multiple buttons, you may need some of the workarounds, but in most cases this will work.

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

I found a solution that does not require a directive. I already used ng-change to capture every keystroke and perform a search, but pressing Enter would put my SharePoint page in edit mode. SharePoint does not allow you to access the form tag, so most of these solutions did not help me.

This solution was much simpler and kept my code in one place: I have an ng-change and ng-keypress event pointing to the same event handler, 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}"/> 

Note that the ng-change event does not pass the $ event attribute and handles valid keystrokes, while the ng-keypress event is only for the enter key.

SCRIPT

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

When the value of $ event is not NULL, this is the enter key, we call protectDefault () and do not process further. When $ event is null, this is a valid key, and we pass it to vm.showResults () for processing.

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> 

And in your JavaScript file add below:

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

Answer 7

This example worked for me:

HTML code:

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

Typescript:

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