Blur an input field on keypress enter on Angular

All we need is an easy explanation of the problem, so here it is.

I found this question very useful for submitting a form when someone presses the “enter” key:


angular.module('yourModuleName').directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
                    scope.$eval(attrs.ngEnter, {'event': event});



<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()">    

What I would like to do know, is to set the field to blur when the “enter” key is pressed. What would doSomething() look like to blur the sender field?

I would like to leave the ngEnter directive as it is, since I would like to re-use it for other functions.

I know I can create a whole directive just for blurring (that’s how I have it now), but what I’d like to do is be able to do something like this:

<input type="text" ng-enter="this.blur()">

Or how do I pass the current element as a parameter?

<input type="text" ng-enter="doBlur(this)">

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

After trying a bunch of things, this is seems not possible, as you would need to pass $event to get the target element, so separate directive seems to be the only way to go:

What we desire:

You cannot pass this because it refers to the scope, so you need to pass the event.

<input type="text" ng-enter="doBlur($event)">

Once you have the event, you can get the target from it.

$scope.doBlur = function($event){
    var target = $;

    // do more here, like blur or other things

But, you can only get pass event in a directive like ng-click … kinda unsatisfactory. If we could pass $event outside directive, we could blur in that reusable way you requested.

Method 2

for Angular 2+

<input ... (keydown.enter)='$'>

Method 3

SoluableNonagon was very close to it. You just have to use the right argument. The directive declared the event parameter as event not $event. You could change the directive to use $event just as ngClick does (Or you keep it and use it as ng-enter="doSomething(event)".

angular.module("app", [])
  .controller('MainController', MainController)
  .directive('myEnter', myEnter);

function MainController() {
  var vm = this;
  vm.text = '';
  vm.enter = function($event) {
    vm.result = vm.text;
    vm.text = '';

myEnter.$inject = ['$parse'];

function myEnter($parse) {
  return {
    restrict: 'A',
    compile: function($element, attr) {
      var fn = $parse(attr.myEnter, null, true);
      return function(scope, element) {
        element.on("keydown keypress", function(event) {
          if (event.which === 13) {
            // This will pass event where the expression used $event
            fn(scope, { $event: event });
<script src=""></script>

<div ng-app="app" ng-controller="MainController as view">
  <input my-enter="view.enter($event)" ng-model="view.text">
  <div ng-bind="view.result"></div>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply