ng-keyup preventDefault() not working

angular preventdefault
angular keydown preventdefault
angular keypress
preventdefault angular 2
ngmodelchange prevent default
primeng preventdefault
angular keydown return false
keydown enter angular

I know it's far from being a best practice, but I really want to understand what's wrong. I wrote the following code in order to distinguish Enter from shift+Enter, and run the "code" I need:

ng-keyup="($event.keyCode == 13 && !$event.shiftKey)
   commentCtrl.edit(, comment.text),
   comment.edit=false, comment.text]

when I press enter, I still get a \n added to my text... :(

Help please!~

Write this in your html

 <input type="text"  ng-keypress="restrictInput($event)" />


Ability to stop event propogation · Issue #2042 · angular/angular , GitHub is home to over 50 million developers working together to returning false causes preventDefault() to run. ie: <div (click)="doSomething(); false"> In Angular, the event handler that a user implements is actually not  For ng-keyup unable to do event.preventDefault() and ng-keypress lagging behind a value for input type number in angular.js Posted on April 6, 2020 by Ankit Pandey Problem: Input type number with min, max is not working while typing in input box we can type less/more than min, max value.

Aha! You've got the "wrong" directive! I just changed mine from ng-keyup to ng-keypress and now $event.preventDefault() works as expected. Hope this helps. I was scratching my head a long time on that.

Angular ng-keyup Directive, The ng-keyup directive from AngularJS will not override the element's original onkeyup event, both will be executed. The order of a key stroke is: 1. Keydown. 2. Now we see that not only does the click event not bubble up the DOM, but by removing the preventDefault method call the a tag acts as it should again, by navigating to its href attribute. But this

ended up writing a directive that prevents it...

(function() {
    'use strict';

    .module('PreventEnterDrc', [])
    .directive('preventEnter', function () {
        return {
            restrict: 'A',
            link: function(scope, element) {
                element.bind('keydown keypress keyup', function (event) {
                    if(event.keyCode == 13 && !event.shiftKey){

.keyup(), A function to execute each time the event is triggered. version added: 1.0.keyup(). This signature does not accept any arguments. try return false instead of event.preventDefault() or accept event as a parameter of your function. $('#form').submit(function(event){ event.preventDefault(); }); Not sure why some people think this no longer works but here is an example showing it does still work.

Try the following.


in your controller,

$scope.handleKeyup =  function($event) {
//write your logic here.

Keydown is the only keyboard event we need, Not us! Okay, maybe keyup goes on the shelf just in case, but surely keypress inserted – no problem – just cancel it using the event's preventDefault method. the return false is not actually necessary. preventDefault() should be sufficient. – amenthes Jan 9 '15 at 23:36 4 @RichardN: I recommend to read the documentation : "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on() ."

preventDefault on keydown - JSFiddle, <input type="text" />. 2. <br>. 3. <br>Prevent Default on keyup: $input.on('keyup keydown keypress', function (e) {. 7 preventDefault();. 10 $input.val( $input.​val() + key );. 17. } 18 See 3. */  I had a similar problem, in which e.preventDefault() would work on some cases, but not on others. It showed no errors, and using try-catch was not displaying the catch alert. Adding e.stopImmediatePropagation() did the trick, in case it helps anyone (big thanks to wcpro)

Angular Quick Tip: Binding Specific Keys to the Keyup and Keydown , It's on our list, and we're working on it! When binding to either the keyup or keydown events in your Angular 2+ templates, you can specify key  Calling preventDefault () during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur. You can use Event.cancelable to check if the event is cancelable. Calling preventDefault () for a non-cancelable event has no effect.

AngularJS: Stopping event propagation on ng-click, <a href="" ng-click="doSomething()"> <span class="glyphicon mouseenter mouseleave keydown keyup keypress submit focus blur copy cut since event handler expressions are not executed as // frequently as to your function and call both stopPropagation() and preventDefault(): Both ways work. Therefore, this is deprecated. Use event.preventDefault() instead. In Angular, the event handler that a user implements is actually not the event handler that the browser sees, but there is an indirection in between (e.g. needed for marshaling things over to webworkers). The argument for the return value would still count though