Angularjs ng-keypress Event Handling Directive

Angularjs ng-keypress Event Handling Directive

In this Post We Will Explain About is Angularjs ng-keypress Event Handling Directive With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angular ng-keypress Directive Example

In this post we will show you Best way to implement AngularJS ng-keypress Event with Example, hear for Managing User Input Key-Events Across Views In AngularJS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Add Angular JS Dependency

First of all, we need to Pur Angular JS libs and in this post, We are using a CDN for Angular Therefor you need Data internet connection for it to work. Basic Place this some directive inside the HTML header sections head tag of Our html.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Define simple App Name

And then, we need to init simple angular app name using angular ng-app directive. You Can place this in Main Root html, body or HTML div tag depending on your display area Our needs. In this post, We have placed it in Basic html tag.

Read Also:  ng-keydown Event using Angular Example

<html ng-app="liveApp">

Define simple Controller

Same as angular app name you can main place it in Body or any html Tags, body or div tag using angular ng-controller defiend but make sure that Our web app name comes simple first than Our angular controller or Our controller wont be first read.

<body ng-controller="liveCtrl">

Creating simple Textbox

After that step in to make simple HTML textbox where we defiend simple custom angular directive that we are gonna to make in simple angular js named Like as live-enter.

<input type="text" class="live form-control" ng-model="liveInput" live-enter="disalogInput()">

Creating simple Angular JS Script

Last step, we create simple angular js main custom script which Data contains simple custom angular directive and simple angular controller.

Read Also:  Jquery Ajax Laravel 5.8 Form Validation

var liveApp = angular.module('liveApp', []);
 
liveApp.directive('liveEnter', function () {
	return function ($scope, element, attrs) {
	       element.bind("keydown keypress", function (event) {
	            if(event.which === 13) {
	                $scope.$apply(function (){
	                    $scope.$eval(attrs.liveEnter);
	                });
 
	                event.preventDefault();
	           }
	       });
	};
});
 
liveApp.controller('liveCtrl', function($scope){
	$scope.disalogInput = function(){
		alert($scope.liveInput);
	}
});

now, we created a angular custom directive that upon angular directive Enter keypress, in simple HTML input html, disalogInput methods is called. In simple angular MVC Basedcontroller, disalogInput methods alerts dialog box the HTML input of simple textbox.

Full HTML – AngularJS Catch Enter Keypress Event

Last, You Show the Full HTML Soure code of this AngularJS Catch Enter Keypress Event Example:

<!DOCTYPE html>
<html ng-app="liveApp">
<head>
	<meta charset="utf-8">
	<title>Simple AngularJS Catch Enter Keypress Event Example</title>
	<link href="bootstrap.min.css"" rel="stylesheet">
    <script src="angular.min.js"></script>
</head>
<body ng-controller="liveCtrl">
	<div class="live24u container">
		<h1 class="page-header text-center">Angular Press enter to display alert Input Value Example</h1>
		<div class="col-sm-2 col-sm-offset-5">
			<input type="text" class="live form-control" ng-model="liveInput" live-enter="disalogInput()">
		</div>
	</div>
<script>
	var liveApp = angular.module('liveApp', []);
 
	liveApp.directive('liveEnter', function () {
	    return function ($scope, element, attrs) {
	        element.bind("keydown keypress", function (event) {
	            if(event.which === 13) {
	                $scope.$apply(function (){
	                    $scope.$eval(attrs.liveEnter);
	                });
 
	                event.preventDefault();
	            }
	        });
	    };
	});
 
	liveApp.controller('liveCtrl', function($scope){
		$scope.disalogInput = function(){
			alert($scope.liveInput);
		}
	});
</script>
</body>
</html>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Read Also:  call to undefined function base_url() Fixed

Example

I hope you have Got What is How to use a keypress event in AngularJS? And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.