ng-keydown ve ng-keyup birer klavye olay izleyicisidir. Kısaca özetlemek gerekirse ng-keydown içerisinde verilen olay, biz ng-keydownun izlediği inputta bir tuşa basmaya başladığımız an tetiklenirken ng-keyup içerisinde verilmiş olay biz tuştan elimizi çektiğimiz an tetiklenecektir.
Aşağıdaki örnekte f1() fonksiyonu tuşa basıldığı an tetiklenecek, f2() fonksiyonu ise tuş bırakıldığı an tetiklenecektir.
<html> <head> <script src="~/Scripts/angular.js"></script> <script src="~/Scripts/angular-route.js"></script> <script> var modul = angular.module("MyModule", []); modul.controller("MyController", function ($scope) { $scope.durum = "herhangi bir etkilesim yok"; $scope.f1 = function () { $scope.durum = "tusa basildi"; } $scope.f2 = function () { $scope.durum = "tus birakildi"; } }); </script> </head> <body ng-app="MyModule" ng-controller="MyController"> {{durum}} <input type="text" ng-keydown="f1()" ng-keyup="f2()" /> </body> </html>
Yalnız bilmemiz gereken önemli bir nokta daha var. Aşağıdaki koda baktığımızda basıldığı ve basılı tutulduğu süre boyunca x değeri 1 artacaktır. Bir aşağıdaki input için ise tuşa basılıp bırakıldığı an y değeri 1 artacaktır. Ancak burda x için durum farklıdır. x tuşa basıldığı an 1 artar ve o tuşa basılı tutulduğu sürece artmaya devam eder. Yani elinizi klavyeden hiç çekmeden aaaa gibi bir girdi için x 4 değerine çıkacaktır. Bunun sebebi ise bilgisayar tarafından tuşa basma işleminin bir plastik tuşa basmaktan ziyade arka tarafta bir olay ile tetiklenilmesidir. Bu da aaaa için 4 kez tetiklemeye karşılık gelir.
<input type="text" ng-init="x=0" ng-keydown="x=x+1" /> <input type="text" ng-init="y=0" ng-keydown="y=y+1" />