Comment utiliser un événement de frappe dans AngularJS?
Je veux saisir l'événement de la touche Entrée dans la zone de texte ci-dessous. Pour que ce soit plus clair, j'utilise un ng-repeat pour peupler le tbody. Voici le HTML:
<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield"
data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>
Ceci est mon module:
angular.module('components', ['ngResource']);
J'utilise une ressource pour remplir la table et mon code de contrôleur est:
function Ajaxy($scope, $resource) {
//controller which has resource to populate the table
}
Vous devez ajouter un directive, comme ceci:
Javascript:
app.directive('myEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.myEnter);
});
event.preventDefault();
}
});
};
});
HTML:
<div ng-app="" ng-controller="MainCtrl">
<input type="text" my-enter="doSomething()">
</div>
Une alternative consiste à utiliser la directive standard ng-keypress="myFunct($event)"
Ensuite, dans votre contrôleur, vous pouvez avoir:
...
$scope.myFunct = function(keyEvent) {
if (keyEvent.which === 13)
alert('I am an alert');
}
...
Mon approche la plus simple utilisant uniquement la directive angular:
ng-keypress, ng-keydown ou ng-keyup.
Habituellement, nous voulons ajouter un support clavier pour quelque chose qui est déjà géré par ng-click.
par exemple:
<a ng-click="action()">action</a>
Ajoutons maintenant le support du clavier.
déclencheur par touche entrée:
<a ng-click="action()"
ng-keydown="$event.keyCode === 13 && action()">action</a>
par touche d'espacement:
<a ng-click="action()"
ng-keydown="$event.keyCode === 32 && action()">action</a>
par espace ou entrée clé:
<a ng-click="action()"
ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>
si vous êtes dans le navigateur moderne
<a ng-click="action()"
ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>
En savoir plus sur keyCode:
keyCode est une API obsolète mais bien supportée, vous pouvez utiliser $ evevt.key dans un navigateur pris en charge.
Voir plus dans https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
Une autre alternative simple:
<input ng-model="edItem" type="text"
ng-keypress="($event.which === 13)?foo(edItem):0"/>
Et l'alternative ng-ui:
<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>
Voici ce que j'ai découvert lorsque je construisais une application avec une exigence similaire. Elle n'exige pas d'écrire une directive et il est relativement simple de dire ce qu'elle fait:
<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">
Vous pouvez utiliser ng-keydown = "myFunction ($ event)" comme attribut.
<input ng-keydown="myFunction($event)" type="number">
myFunction(event) {
if(event.keyCode == 13) { // '13' is the key code for enter
// do what you want to do when 'enter' is pressed :)
}
}
html
<textarea id="messageTxt"
rows="5"
placeholder="Escriba su mensaje"
ng-keypress="keyPressed($event)"
ng-model="smsData.mensaje">
</textarea>
controller.js
$scope.keyPressed = function (keyEvent) {
if (keyEvent.keyCode == 13) {
alert('presiono enter');
console.log('presiono enter');
}
};
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Informe your name:<input type="text" ng-model="pergunta" ng-keypress="pressionou_enter($event)" ></input>
<button ng-click="chamar()">submit</button>
<h1>{{resposta}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
//create a service mitsuplik
app.service('mitsuplik', function() {
this.myFunc = function (parametro) {
var tmp = "";
for (var x=0;x<parametro.length;x++)
{
tmp = parametro.substring(x,x+1) + tmp;
}
return tmp;
}
});
//Calling our service
app.controller('myCtrl', function($scope, mitsuplik) {
$scope.chamar = function() {
$scope.resposta = mitsuplik.myFunc($scope.pergunta);
};
//if mitsuplik press [ENTER], execute too
$scope.pressionou_enter = function(keyEvent) {
if (keyEvent.which === 13)
{
$scope.chamar();
}
}
});
</script>
</body>
</html>
Vous pouvez également l'appliquer à un contrôleur sur un élément parent. Cet exemple peut être utilisé pour mettre en évidence une ligne dans un tableau en appuyant sur les touches fléchées haut/bas.
app.controller('tableCtrl', [ '$scope', '$element', function($scope, $element) {
$scope.index = 0; // row index
$scope.data = []; // array of items
$scope.keypress = function(offset) {
console.log('keypress', offset);
var i = $scope.index + offset;
if (i < 0) { i = $scope.data.length - 1; }
if (i >= $scope.data.length) { i = 0; }
};
$element.bind("keydown keypress", function (event) {
console.log('keypress', event, event.which);
if(event.which === 38) { // up
$scope.keypress(-1);
} else if (event.which === 40) { // down
$scope.keypress(1);
} else {
return;
}
event.preventDefault();
});
}]);
<table class="table table-striped" ng-controller="tableCtrl">
<thead>
<tr>
<th ng-repeat="(key, value) in data[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data track by $index" ng-click="draw($index)" ng-class="$index == index ? 'info' : ''">
<td ng-repeat="(key, value) in row">{{value}}</td>
</tr>
</tbody>
</table>
En essayant
ng-keypress="console.log($event)"
ng-keypress="alert(123)"
n'a rien fait pour moi.
Étranglez l'exemple sur https://docs.angularjs.org/api/ng/directive/ngKeypress , ce qui fait que ng-keypress = "count = count + 1" fonctionne.
J'ai trouvé une autre solution, qui consiste à appuyer sur Entrée pour invoquer le clic du bouton.
<input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/>
<button id="button" ng-click="doSomething()">Done</button>
C'est une extension de la réponse d'EpokK.
J'ai eu le même problème d'avoir à appeler une fonction scope quand enter est poussé sur un champ de saisie. Cependant, je voulais aussi passer le valeur du champ de saisie à la fonction spécifiée. Ceci est ma solution:
app.directive('ltaEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
// Create closure with proper command
var fn = function(command) {
var cmd = command;
return function() {
scope.$eval(cmd);
};
}(attrs.ltaEnter.replace('()', '("'+ event.target.value +'")' ));
// Apply function
scope.$apply(fn);
event.preventDefault();
}
});
};
});
L'utilisation en HTML est la suivante:
<input type="text" name="itemname" lta-enter="add()" placeholder="Add item"/>
Bravo à EpokK pour sa réponse.
Et ça?:
<form ng-submit="chat.sendMessage()">
<input type="text" />
<button type="submit">
</form>
Désormais, lorsque vous appuyez sur la touche Entrée après avoir écrit quelque chose dans votre entrée, le formulaire sait comment le gérer.
Je pense que l'utilisation de document.bind est un peu plus élégante
constructor($scope, $document) {
var that = this;
$document.bind("keydown", function(event) {
$scope.$apply(function(){
that.handleKeyDown(event);
});
});
}
Pour envoyer un document au constructeur du contrôleur:
controller: ['$scope', '$document', MyCtrl]
(function(angular) {
'use strict';
angular.module('dragModule', [])
.directive('myDraggable', ['$document', function($document) {
return {
link: function(scope, element, attr) {
element.bind("keydown keypress", function (event) {
console.log('keydown keypress', event.which);
if(event.which === 13) {
event.preventDefault();
}
});
}
};
}]);
})(window.angular);
Quelques exemples de code que j'ai créés pour mon projet. Fondamentalement, vous ajoutez des balises à votre entité. Imaginez que vous avez du texte saisi. Lorsque vous entrez le nom de la balise, vous obtenez un menu déroulant avec des balises préchargées parmi lesquelles vous pouvez faire votre choix, vous naviguez avec des flèches et vous sélectionnez avec Entrée:
HTML + AngularJS v1.2.0-rc.3
<div>
<form ng-submit="addTag(newTag)">
<input id="newTag" ng-model="newTag" type="text" class="form-control" placeholder="Enter new tag"
style="padding-left: 10px; width: 700px; height: 33px; margin-top: 10px; margin-bottom: 3px;" autofocus
data-toggle="dropdown"
ng-change="preloadTags()"
ng-keydown="navigateTags($event)">
<div ng-show="preloadedTags.length > 0">
<nav class="dropdown">
<div class="dropdown-menu preloadedTagPanel">
<div ng-repeat="preloadedTag in preloadedTags"
class="preloadedTagItemPanel"
ng-class="preloadedTag.activeTag ? 'preloadedTagItemPanelActive' : '' "
ng-click="selectTag(preloadedTag)"
tabindex="{{ $index }}">
<a class="preloadedTagItem"
ng-class="preloadedTag.activeTag ? 'preloadedTagItemActive' : '' "
ng-click="selectTag(preloadedTag)">{{ preloadedTag.label }}</a>
</div>
</div>
</nav>
</div>
</form>
</div>
Controller.js
$scope.preloadTags = function () {
var newTag = $scope.newTag;
if (newTag && newTag.trim()) {
newTag = newTag.trim().toLowerCase();
$http(
{
method: 'GET',
url: 'api/tag/gettags',
dataType: 'json',
contentType: 'application/json',
mimeType: 'application/json',
params: {'term': newTag}
}
)
.success(function (result) {
$scope.preloadedTags = result;
$scope.preloadedTagsIndex = -1;
}
)
.error(function (data, status, headers, config) {
}
);
} else {
$scope.preloadedTags = {};
$scope.preloadedTagsIndex = -1;
}
};
function checkIndex(index) {
if (index > $scope.preloadedTags.length - 1) {
return 0;
}
if (index < 0) {
return $scope.preloadedTags.length - 1;
}
return index;
}
function removeAllActiveTags() {
for (var x = 0; x < $scope.preloadedTags.length; x++) {
if ($scope.preloadedTags[x].activeTag) {
$scope.preloadedTags[x].activeTag = false;
}
}
}
$scope.navigateTags = function ($event) {
if (!$scope.newTag || $scope.preloadedTags.length == 0) {
return;
}
if ($event.keyCode == 40) { // down
removeAllActiveTags();
$scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex + 1);
$scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
} else if ($event.keyCode == 38) { // up
removeAllActiveTags();
$scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex - 1);
$scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
} else if ($event.keyCode == 13) { // enter
removeAllActiveTags();
$scope.selectTag($scope.preloadedTags[$scope.preloadedTagsIndex]);
}
};
$scope.selectTag = function (preloadedTag) {
$scope.addTag(preloadedTag.label);
};
CSS + Bootstrap v2.3.2
.preloadedTagPanel {
background-color: #FFFFFF;
display: block;
min-width: 250px;
max-width: 700px;
border: 1px solid #666666;
padding-top: 0;
border-radius: 0;
}
.preloadedTagItemPanel {
background-color: #FFFFFF;
border-bottom: 1px solid #666666;
cursor: pointer;
}
.preloadedTagItemPanel:hover {
background-color: #666666;
}
.preloadedTagItemPanelActive {
background-color: #666666;
}
.preloadedTagItem {
display: inline-block;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 10px;
color: #666666 !important;
font-size: 11px;
}
.preloadedTagItem:hover {
background-color: #666666;
}
.preloadedTagItemActive {
background-color: #666666;
color: #FFFFFF !important;
}
.dropdown .preloadedTagItemPanel:last-child {
border-bottom: 0;
}
Je suis un peu en retard .. mais j'ai trouvé une solution plus simple en utilisant auto-focus .. Cela pourrait être utile pour les boutons ou autres lors du popping d'une dialog:
<button auto-focus ng-click="func()">ok</button>
Cela devrait suffire si vous souhaitez appuyer sur le bouton onSpace ou sur Enter.
voici ma directive:
mainApp.directive('number', function () {
return {
link: function (scope, el, attr) {
el.bind("keydown keypress", function (event) {
//ignore all characters that are not numbers, except backspace, delete, left arrow and right arrow
if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) {
event.preventDefault();
}
});
}
};
});
usage:
<input number />
vous pouvez utiliser ng-keydown, ng-keyup, ng-press tel que celui-ci.
triger une fonction:
<input type="text" ng-keypress="function()"/>
ou si vous avez une condion comme quand il appuie sur évasion (27 est le code clé pour échapper)
<form ng-keydown=" event.which=== 27?cancelSplit():0">
....
</form>
Tout ce que vous devez faire pour obtenir l'événement est le suivant:
console.log(angular.element(event.which));
Une directive peut le faire, mais ce n'est pas comment vous le faire.