eventos angularjs angularjs-directive angular-ui

angularjs - eventos - keypress angular 4



¿Cómo usar un evento de pulsación de tecla en AngularJS? (19)

Quiero ver el evento de presionar la tecla Intro en el cuadro de texto a continuación. Para que quede más claro, estoy usando una ng-repeat para rellenar el cuerpo. Aquí está el 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>

Este es mi módulo:

angular.module(''components'', [''ngResource'']);

Estoy usando un recurso para llenar la tabla y el código de mi controlador es:

function Ajaxy($scope, $resource) { //controller which has resource to populate the table }


¿Qué pasa con esto ?:

<form ng-submit="chat.sendMessage()"> <input type="text" /> <button type="submit"> </form>

Ahora, cuando presiona la tecla enter después de escribir algo en su entrada, el formulario sabe cómo manejarlo.


Algún ejemplo de código que hice para mi proyecto. Básicamente usted agrega etiquetas a su entidad. Imagina que tienes texto de entrada, al ingresar el nombre de la etiqueta, obtienes un menú desplegable con etiquetas precargadas para elegir, navegas con flechas y seleccionas la tecla 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>

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; }


Aquí está mi directiva:

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(); } }); } }; });

uso:

<input number />


Creo que usar document.bind es un poco más elegante

constructor($scope, $document) { var that = this; $document.bind("keydown", function(event) { $scope.$apply(function(){ that.handleKeyDown(event); }); }); }

Para llevar el documento al constructor del controlador:

controller: [''$scope'', ''$document'', MyCtrl]


Esta es una extensión de la respuesta de EpokK.

Tuve el mismo problema de tener que llamar a una función de alcance cuando se ingresa ingresar en un campo de entrada. Sin embargo, también quería pasar el valor del campo de entrada a la función especificada. Esta es mi solución:

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(); } }); };

});

El uso en HTML es el siguiente:

<input type="text" name="itemname" lta-enter="add()" placeholder="Add item"/>

Felicitaciones a EpokK por su respuesta.


Esto es lo que descubrí cuando estaba creando una aplicación con un requisito similar, no requiere escribir una directiva y es relativamente sencillo decir lo que hace:

<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">


Llego un poco tarde ... pero encontré una solución más simple utilizando auto-focus ... Esto podría ser útil para los botones u otros al abrir un dialog :

<button auto-focus ng-click="func()">ok</button>

Eso debería estar bien si desea presionar el botón on Espacio o Ingresar clics.


Mi enfoque más simple utilizando solo la directiva de incorporación angular:

ng-keypress , ng-keydown o ng-keyup .

Por lo general, queremos agregar compatibilidad con el teclado para algo que ya se maneja con ng-click.

por ejemplo:

<a ng-click="action()">action</a>

Ahora, vamos a añadir soporte de teclado.

disparar por la tecla enter:

<a ng-click="action()" ng-keydown="$event.keyCode === 13 && action()">action</a>

por tecla de espacio:

<a ng-click="action()" ng-keydown="$event.keyCode === 32 && action()">action</a>

por espacio o tecla enter:

<a ng-click="action()" ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>

si estas en el navegador moderno

<a ng-click="action()" ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>

Más sobre keyCode:
keyCode está en desuso pero es una API bien soportada, podría usar $ evevt.key en el navegador compatible.
Vea más en https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key


Molesto

ng-keypress="console.log($event)" ng-keypress="alert(123)"

no hizo nada por mi

Strangley la muestra en https://docs.angularjs.org/api/ng/directive/ngKeypress , que hace ng-keypress = "count = count + 1", funciona.

Encontré una solución alternativa, que tiene presionar Intro para invocar el clic del botón.

<input ng-model="..." onkeypress="if (event.which==13) document.getElementById(''button'').click()"/> <button id="button" ng-click="doSomething()">Done</button>


Necesitas agregar una directive , como esta:

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>


Otra alternativa simple:

<input ng-model="edItem" type="text" ng-keypress="($event.which === 13)?foo(edItem):0"/>

Y la alternativa ng-ui:

<input ng-model="edItem" type="text" ui-keypress="{''enter'':''foo(edItem)''}"/>


Puede usar ng-keydown = "myFunction ($ event)" como atributo.

<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 :) } }


Que tal solo

<input (keyup.enter)="doWhatYouWant()">


También puede aplicarlo a un controlador en un elemento padre. Este ejemplo se puede usar para resaltar una fila en una tabla presionando las teclas de flecha arriba / abajo.

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>


Una alternativa es usar la directiva estándar ng-keypress="myFunct($event)"

Luego en tu controlador puedes tener:

... $scope.myFunct = function(keyEvent) { if (keyEvent.which === 13) alert(''I am an alert''); } ...


puede usar ng-keydown, ng-keyup, ng-press como este.

a triger una función:

<input type="text" ng-keypress="function()"/>

o si tiene un condón como cuando presiona escapar (27 es el código clave para escapar)

<form ng-keydown=" event.which=== 27?cancelSplit():0"> .... </form>


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>


(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);