CODEWITHSUNDEEP
angularjskeypressblur
ahoereth
ahoereth

Reputation: 497

AngularJS submit on blur and blur on keypress

I want to submit some data to the server when a input field is blurred. The User should also be able to blur the input field by pressing enter.

Unfortunately this results in the following: $rootScope:inprog: $apply already in progress error.

Plunkr - thanks in advance!

Upvotes: 7

Views: 12639

Answers (3)

acorbel
acorbel

Reputation: 1568

Here is a small directive : 

    .directive('ngEnterBlur', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress blur", function (event) {
            if(event.which === 13 || event.type === "blur") {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnterBlur);
                });

                event.preventDefault();
            }
        });
    };
})

Upvotes: 1

JQuery Guru
JQuery Guru

Reputation: 6963

You can checkout Angular UI @ http://angular-ui.github.io/ui-utils/

Provide details event handle related blur,focus,keydow,keyup,keypress

<input ui-event="{ blur : 'blurCallback()' }">
<textarea ui-keypress="{13:'keypressCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keydown="{27:'keydownCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keyup="{'enter':'keypressCallback($event)'}"> </textarea>

Upvotes: 4

Laurent Perrin
Laurent Perrin

Reputation: 14881

Here's what's happening:

  • You press enter
  • ng-keydown triggers (digest begins)
  • You call target.blur()
  • ng-blur triggers and attempts to start another digest cycle
  • Angular complains

The blur is executed synchronously and immediately triggers the handler without finishing the first digest.

In my opinion, this is not a problem with your code, but rather an Angular bug. I've been trying to think of a better solution, but I can only find:

app.controller('BlurCtrl', function($scope, $timeout) {
  $scope.blurModel = "I'm the value"

    $scope.blurOnEnter = function( $event ) {
      if ( $event.keyCode != 13 )
        return

      // this will finish the current digest before triggering the blur
      $timeout(function () { $event.target.blur() }, 0, false);
    }

    $scope.onBlur = function() {
    $scope.result = this.blurModel
    }
})

Upvotes: 10

Related Questions