CODEWITHSUNDEEP
htmlangularjs
Tharif
Tharif

Reputation: 13971

Detecting keyboard keys input

Currently am having a form which detects the user input text and prints the respective text,but my issue is if user want to input as ctrl key how can i accomplish that

For example :

If user presses key a it will get displayed,but at the same time if user press cntrl key it should also get displayed.

Fiddled here.

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


<div ng-app="">

<p>Choose your control</p>
<p>Option : <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

Thanks

Upvotes: 0

Views: 280

Answers (3)

ketan
ketan

Reputation: 19351

Here is you answer for control key detect with angular JS:

angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    // Initialization
    $scope.onKeyDownResult = "";
    $scope.onKeyUpResult = "";
    $scope.onKeyPressResult = "";

    // Utility functions

    var getKeyboardEventResult = function (keyEvent, keyEventDesc)
    {
      return keyEventDesc + " (keyCode: " + (window.event ? keyEvent.keyCode : keyEvent.which) + ")";
    };

    // Event handlers
    $scope.onKeyDown = function ($event) {
      if($event.keyCode === 17)
        {
          $scope.name += " ctrl ";
          $scope.onKeyDownResult = getKeyboardEventResult($event, name);
        }
      else if($event.keyCode === 16)
        {
          $scope.name += " shift ";
          $scope.onKeyDownResult = getKeyboardEventResult($event, name);
        }
      else if($event.keyCode === 18)
        {
          $scope.name += " Alt ";
          $scope.onKeyDownResult = getKeyboardEventResult($event, name);
        }
      else
        {
      $scope.onKeyDownResult = getKeyboardEventResult($event, name);
        }
    };

  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <label>Type something:
      <input type="text"
             ng-keydown="onKeyDown($event)"
             ng-model="name" />
    </label><br />
    <p>KEY DOWN RESULT:<p>{{name}}<br />
    
  </div>
</body>
</html>

Hope it helps.

Upvotes: 1

freethinker
freethinker

Reputation: 2435

Try to use "ng-keypress=check($event)", the $event object have "keyCode", check the keyCode and update your model inside the function. Ctrl is keycode 17. So inside your function you will check specific keys like this: if($event.keyCode === 17){ $scope.model += " ctrl" }; You can see all keycodes here: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Upvotes: 0

Pekka
Pekka

Reputation: 999

See AngularJS keyboard events: http://www.angularjshub.com/examples/eventhandlers/keyboardevents/

You can capture keycodes by using these events on input box:

<input type="text"
ng-keydown="onKeyDown($event)"
ng-keyup="onKeyUp($event)"
ng-keypress="onKeyPress($event)" />

Upvotes: 0

Related Questions