CODEWITHSUNDEEP
javascriptangularjs
byCoder
byCoder

Reputation: 9184

angularJS bind to input's enter key and submit if input is button

I have such directive, to go to next input (or button) in modal window:

.directive('autoVrm', function () {
    return function (scope, element, attrs) {
                var counter = 0;
            element.bind("keydown keypress", function (event) {
                console.log(element);           
                if(event.which === 13) {
                        counter++;
                    event.preventDefault();
                    var elementToFocus = element.find('input')[counter] || element.find('button')[1];
                    console.log(elementToFocus.type);
                    if(angular.isDefined(elementToFocus))
                        elementToFocus.focus();
                    if (elementToFocus.type === 'button'){
                        counter = -1;
                        elementToFocus.bind("keydown keypress", function (eventSubmit) {
                            if(eventSubmit.which === 13) {
                                console.log('submit');
                            }
                        });
                    }
                }
            });
        };

but i have one trouble, if i'm on button, and click enter i get:

Uncaught TypeError: undefined is not a function

but why? how to make enter click to submit form? without dependency to controller?

Upvotes: 1

Views: 3972

Answers (2)

camden_kid
camden_kid

Reputation: 12813

Try angular.element(elementToFocus).bind for the Uncaught TypeError.

Regarding your new comment:

If this is defined in your controller

$scope.registerUser = function() {
    ...
}

Then call it in the directive simply by

elementToFocus.bind("keydown keypress", function (eventSubmit) {
    if(eventSubmit.which === 13) {
        scope.registerUser();
    }
});

As a guess, you could do something like check the attrs parameter to get the value of 'data-ng-click' and call the appropriate function:

elementToFocus.bind("keydown keypress", function (eventSubmit) {
    if(eventSubmit.which === 13) {
        if (attrs.dataNgClick == "registerUser()" {
            scope.registerUser();
        }
        else if (attrs.dataNgClick == "sign()" {
            scope.sign();
        }
        else if (attrs.dataNgClick == "frgtPassword()" {
            scope.frgtPassword();
        }
    }
});

Upvotes: 2

André Werlang
André Werlang

Reputation: 5944

This behavior is already defined in web technologies. When you press ENTER inside a form, it is submitted. To achieve this, you need to handle the right event (ng-submit). You can achieve the effect you're looking for with less code.

angular.module('app', [])
.controller('MyCtrl', function () {
  var self = this;
  self.message = "press ENTER to submit"; 
  self.count = 0; 
  this.onSubmit = function () {
    self.count++;
    self.message = "form submitted " + self.count + " times";
  };
});
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.1" src="https://code.angularjs.org/1.4.0-beta.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MyCtrl as ctrl">
    <h1>Hello Stack Overflow!</h1>
    <form ng-submit="ctrl.onSubmit()">
      <input type="text" placeholder="press ENTER"/>
      <input type="text" placeholder="press ENTER"/>
      <input type="submit" value="Send" />
    </form>
    <div>{{ctrl.message}}</div>
  </body>

</html>

Upvotes: 1

Related Questions