Comment utiliser un événement keypress à AngularJS?
je veux attraper l'événement enter key press sur la boîte de texte ci-dessous. Pour être plus clair, j'utilise un ng-repeat pour peupler le corps. 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>
C'est mon module:
angular.module('components', ['ngResource']);
j'utilise une ressource pour peupler la table et mon code de contrôleur est:
function Ajaxy($scope, $resource) {
//controller which has resource to populate the table
}
18 réponses
, 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 est d'utiliser la directive standard ng-keypress="myFunct($event)"
alors dans votre controller vous pouvez avoir:
...
$scope.myFunct = function(keyEvent) {
if (keyEvent.which === 13)
alert('I am an alert');
}
...
mon approche la plus simple en utilisant juste la directive d'intégration angulaire:
ng-keypress , ng-keydown ou ng-keyup .
Habituellement, nous voulons ajouter la prise en charge du clavier pour quelque chose qui est déjà géré par ng-click.
par exemple:
<a ng-click="action()">action</a>
maintenant, ajoutons la prise en charge du clavier.
déclenchement par touche entrée:
<a ng-click="action()"
ng-keydown="$event.keyCode === 13 && action()">action</a>
par space key:
<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>
plus d'informations à propos de keyCode:
keyCode est déprécié, mais L'API est bien supportée, vous pouvez utiliser $evevt.touche dans le navigateur soutenu à la place.
En savoir plus sur 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 la variante ng-ui:
<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>
voici ce que j'ai compris quand je construisais une application avec une exigence similaire, il n'est pas nécessaire 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 ="mafonction($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>
contrôleur.js
$scope.keyPressed = function (keyEvent) {
if (keyEvent.keyCode == 13) {
alert('presiono enter');
console.log('presiono enter');
}
};
Essayer
ng-keypress="console.log($event)"
ng-keypress="alert(123)"
n'a rien fait pour moi.
étrangler L'échantillon à https://docs.angularjs.org/api/ng/directive/ngKeypress , qui fait ng-keypress=" count = count + 1", works.
j'ai trouvé une solution alternative, qui a appuyé sur ENTER invoquer le ng-click du bouton.
<input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/>
<button id="button" ng-click="doSomething()">Done</button>
Vous pouvez également l'appliquer à un contrôleur à un élément parent. Cet exemple peut être utilisé pour mettre en évidence une rangée dans une table 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>
ceci est une extension sur la réponse D'EpokK.
j'ai eu le même problème de devoir appeler une fonction scope quand enter est poussé sur un champ d'entrée. Cependant, je voulais aussi passer la valeur du champ d'entrée à la fonction spécifiée. C'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"/>
félicitations à EpokK pour sa réponse.
et ça?:
<form ng-submit="chat.sendMessage()">
<input type="text" />
<button type="submit">
</form>
maintenant, lorsque vous appuyez sur Entrée clé après écrire quelque chose dans votre entrée, le formulaire savoir comment le gérer.
<!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>
un exemple de code que j'ai fait pour mon projet. En gros, vous ajoutez des balises à votre entité. Imaginez que vous avez le texte d'entrée, en entrant le nom de L'étiquette vous obtenez le menu déroulant avec les étiquettes préchargées au choix, vous naviguez avec des flèches et 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>
contrôleur.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 autre lors de l'éclatement d'un dialog :
<button auto-focus ng-click="func()">ok</button>
qui devrait être très bien si vous voulez appuyer sur le bouton on espace ou entrer des clics .
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();
}
});
}
};
});
utilisation:
<input number />
vous pouvez utiliser ng-keydown , ng-keyup , ng-presse comme celui-ci .
to trigger a function:
<input type="text" ng-keypress="function()"/>
ou si vous avez un condion comme quand il appuie sur escape (27 est la clé code pour s'échapper)
<form ng-keydown=" event.which=== 27?cancelSplit():0">
....
</form>
je pense utiliser un document.bind est un peu plus élégant
constructor($scope, $document) {
var that = this;
$document.bind("keydown", function(event) {
$scope.$apply(function(){
that.handleKeyDown(event);
});
});
}
pour obtenir le document au constructeur du contrôleur:
controller: ['$scope', '$document', MyCtrl]
Que Diriez-vous de juste
<input (keyup.enter)="doWhatYouWant()">