Как использовать событие нажатия клавиши в AngularJS?
Я хочу поймать событие нажатия клавиши enter в текстовом поле ниже. Чтобы сделать его более ясным, я использую ng-repeat для заполнения элемента tbody. Вот 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>
Это мой модуль:
angular.module('components', ['ngResource']);
Я использую ресурс для заполнения таблицы и мой код контроллера:
function Ajaxy($scope, $resource) {
//controller which has resource to populate the table
}
18 ответов
вам нужно добавить directive, например:
в 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>
альтернативой является использование стандартной директивы ng-keypress="myFunct($event)"
тогда в вашем контроллере вы можете иметь:
...
$scope.myFunct = function(keyEvent) {
if (keyEvent.which === 13)
alert('I am an alert');
}
...
мой самый простой подход, используя только директиву угловой сборки:
ng-keypress, ng-keydown или ng-keyup.
обычно мы хотим добавить поддержку клавиатуры для чего-то, что уже обрабатывается ng-click.
например:
<a ng-click="action()">action</a>
теперь, давайте добавим поддержку клавиатуры.
триггер с помощью клавиши enter:
<a ng-click="action()"
ng-keydown="$event.keyCode === 13 && action()">action</a>
клавиша пробела:
<a ng-click="action()"
ng-keydown="$event.keyCode === 32 && action()">action</a>
пробел или Enter:
<a ng-click="action()"
ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>
если вы находитесь в современных браузер
<a ng-click="action()"
ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>
подробнее о keyCode:
keyCode устарел, но хорошо поддерживается API, вы можете использовать $evevt.вместо этого введите поддерживаемый браузер.
Более подробно см. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
еще один простой вариант:
<input ng-model="edItem" type="text"
ng-keypress="($event.which === 13)?foo(edItem):0"/>
и альтернатива ng-ui:
<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>
вот что я понял, когда я создавал приложение с аналогичным требованием, это не требует написания директивы, и относительно просто сказать, что она делает:
<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">
можно использовать ng-keydown ="myFunction($event)" в качестве атрибута.
<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>
.js
$scope.keyPressed = function (keyEvent) {
if (keyEvent.keyCode == 13) {
alert('presiono enter');
console.log('presiono enter');
}
};
попытка
ng-keypress="console.log($event)"
ng-keypress="alert(123)"
ничего не сделал для меня.
Стренгли образец на https://docs.angularjs.org/api/ng/directive/ngKeypress, который делает ng-keypress="count = count + 1", работает.
Я нашел альтернативное решение, которое имеет нажатие Enter вызвать ng-click кнопки.
<input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/>
<button id="button" ng-click="doSomething()">Done</button>
вы также можете применить его к контроллеру от родительского элемента. В этом примере можно выделить строку в таблице, нажав клавиши со стрелками вверх/вниз.
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>
это расширение на ответ от EpokK.
у меня была такая же проблема с вызовом функции scope при нажатии enter на поле ввода. Однако я также хотел передать значение поля ввода указанной функции. Вот мое решение:--3-->
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();
}
});
};
});
использование в HTML выглядит следующим образом:
<input type="text" name="itemname" lta-enter="add()" placeholder="Add item"/>
Слава EpokK за его ответ.
Как насчет этого?:
<form ng-submit="chat.sendMessage()">
<input type="text" />
<button type="submit">
</form>
теперь, когда вы нажимаете клавишу 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>
некоторый пример кода, который я сделал для своего проекта. В основном вы добавляете теги в свою сущность. Представьте, что у вас есть входной текст, при вводе имени тега вы получаете раскрывающееся меню с предварительно загруженными тегами на выбор, вы перемещаетесь со стрелками и выбираете с помощью Enter:
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>
$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;
}
Я немного опоздал .. но я нашел более простое решение, используя auto-focus .. Это может быть полезно для кнопок или других при появлении dialog :
<button auto-focus ng-click="func()">ok</button>
это должно быть хорошо, если вы хотите нажать кнопку onпробел или Enter нажимает .
вот:
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();
}
});
}
};
});
использование:
<input number />
вы можете использовать ng-keydown, ng-keyup, ng-press, такие как это .
для Тригера функция:
<input type="text" ng-keypress="function()"/>
или если у вас есть одно условие, например, когда он нажимает escape (27-это ключ код для побега)
<form ng-keydown=" event.which=== 27?cancelSplit():0">
....
</form>
Я думаю, используя документ.bind немного более элегантный
constructor($scope, $document) {
var that = this;
$document.bind("keydown", function(event) {
$scope.$apply(function(){
that.handleKeyDown(event);
});
});
}
чтобы получить документ в конструктор контроллера:
controller: ['$scope', '$document', MyCtrl]