forum

home / developersection / forums / how to use a keypress event in angularjs?

Ask Question
Revati S Misra

Student

Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Follow
Can you answer this question?
Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

19-Jun-2024

Keypress Event

In AngularJS, you can use the built-in directive ng-keypress to handle the keypress event.

Here are the steps to use this event,

HTML

To add the keypress event in the angular application, you can use the ng-keypress as given below,

<input type="text" ng-keypress="handleKeypress($event)">

In the above syntax

  • ng-keypress is the built-in directive that triggers the handleKeypress function when a key/button is pressed.
  • $event is the special type of angular expression that passes the event object to the function.

 

JavaScript

Here's how to control for keypress events in the Angular JS application,

angular.module('myApp', [])
 .controller('MyController', ['$scope', function($scope) {
   $scope.handleKeypress = function(event) {
     console.log('Key pressed:', event.key);
     // Add your logic here
   };
 }]);

handleKeypress is the function defined in the controller scope that is called every time the key/button is pressed.

event is the event object that contains the information about the keypress (event.key) event.

Example- 

let's take a simple example that explain the use of keypress event in angular js,

<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Keypress Event Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- bootstrap cdn link -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- angular js cdn link -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>

<body>
    <div data-ng-controller="MyController" class="container my-4">
        <div class="my-2">
          <h3>Keypress Event example</h3>
          <!-- input field for enter text for keypress event -->
          <input type="text" data-ng-keypress="handleKeypress($vent)" class="form-control" placeholder="enter text" />
        </div>
        <div class="my-2">
          <!-- show the counting of key pressed -->
          <p>You Press the key in <span data-ng-bind="Count" class="fw-bold"></span> times.</p>
        </div>
    </div>

    <script>
        angular.module("myApp", [])
        .controller("MyController", function($scope){
            $scope.Count = 0;
           
            // function that handles the keypress event
            $scope.handleKeypress = function(event)
            {
              // add 1 every time when the key is pressed
              $scope.Count = $scope.Count+1;
            }
        });

    </script>

</body>
</html>

<input type="text" ng-keypress="handleKeypress($event)">: The input field that triggers the handleKeypress function every time when a key is pressed.

Output- 

How to use a keypress event in AngularJS?

Also, Read: How to display length of filtered ng-repeat data?

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy