ng-keypress not triggering function

Question

I'm new to AngularJS. I'm implementing ng-keypress events in AngularJS. I referred to many blogs and tried to do as it is shown, but my code is not working!

    <div ng-app="myApp">
        <div ng-controller="MainCtrl">
            <input  ng-keypress="change($event)" type="text" >
            {{ text }}
        </div>
    </div>

script is:

    var myApp = angular.module('myApp', []);

    myApp.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.change=function($event){
            $scope.text= 'a';
        };
    }]);

I'm trying to change the value of {{text}} on keypress.. but it's not working! can anyone help me out!

Thanks :)

Eassa Nassar · Accepted Answer · 2016-08-17 09:55:14Z

6

sometimes ng-keypress do not work on some browsers !! i had the issue with the arrow keys in chrome try ng-keydown instead (it worked for me )

answered Aug 17, 2016 at 9:55

Eassa Nassar

1,2801 gold badge16 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Varinder Over a year ago

I encountered same issue. I have implemented type head plugin of boot strap with angular. And on input I have bind key press event. When I start typing before selecting then key press event was firing but when I selected a option from typehead and again started typing key presss event stops working. It works again untill I remove the whole text from input. I am shocked why it happening. But keydown event worked perfectly. This issue is occuring only on CHROME and EDGE.

Varinder Over a year ago

Here is the code pen link codepen.io/varinder_rai/pen/YpReBG fort issue which I have described above. When keypress event will be changed to keydown it works properly.

Yasser Shaikh · Accepted Answer · 2015-11-24 07:08:26Z

5

i tried the same things and its working

  <body ng-controller="MainCtrl">
    <input  ng-keypress="change($event)" type="text" >
    <pre>{{name}}</pre>
  </body>


app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.change=function($event){
    $scope.name= 'hello';
    };
});

checkout this plunker... PLUNKER LINK

EDIT checkout your code plunker.. thats also working

EDIT

finally the answer is: 1.0.7 does not support ng-keypress, hence it was not working..

edited Nov 24, 2015 at 7:08

Yasser Shaikh

47.9k50 gold badges208 silver badges289 bronze badges

answered Jul 26, 2014 at 13:03

harishr

18.1k9 gold badges84 silver badges131 bronze badges

3 Comments

bharat Over a year ago

i used minified AngularJS script from google api.. i doubted it and changed to script u included in plunker!! shockingly it's working. but why it didn't worked with this ( <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> )

harishr Over a year ago

i dont think 1.0.7 had ng-keypress... 1.0.7 api

bharat Over a year ago

ohh.. i'm using old release it seems! thanks for your reply harish. :)

Edminsson · Accepted Answer · 2014-07-26 13:14:10Z

1

As everyone else says it's working as it is supposed to do. Perhaps you want something like this?

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.text = '';
  $scope.change=function($event){
    $scope.text += String.fromCharCode($event.keyCode);
  };
}]);

answered Jul 26, 2014 at 13:14

Edminsson

2,51422 silver badges25 bronze badges

Collectives™ on Stack Overflow

ng-keypress not triggering function

3 Answers 3

2 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Related