Reputation: 13971
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
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
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
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