Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS Autofocus directive
/**
* the HTML5 autofocus property can be finicky when it comes to dynamically loaded
* templates and such with AngularJS. Use this simple directive to
* tame this beast once and for all.
*
* Usage:
* <input type="text" autofocus>
*
* License: MIT
*/
angular.module('utils.autofocus', [])
.directive('autofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
link : function($scope, $element) {
$timeout(function() {
$element[0].focus();
});
}
}
}]);
@jolugama

This comment has been minimized.

Copy link

jolugama commented Nov 13, 2014

Thanks!.

@dustinsmith1024

This comment has been minimized.

Copy link

dustinsmith1024 commented Nov 27, 2014

👍

@zhangnanMoo

This comment has been minimized.

Copy link

zhangnanMoo commented Jan 9, 2015

what if $timeout have not controll time it will be?

@kirkstrobeck

This comment has been minimized.

Copy link

kirkstrobeck commented Jan 21, 2015

https://gist.github.com/kirkstrobeck/599664399dbc23968741

  • Added use strict in self executing function
  • Enforced 80 char line limit
  • Adheres to webmaker jsbeautify
  • Tabs converted to spaces
  • Added missing semi-colon
  • Added global for airbnb jshint
  • Enforced consistent spacing

@Olloth

This comment has been minimized.

Copy link

Olloth commented Feb 9, 2015

Any chance you could explicitly license this under an open source license or mark it as public domain?

Thanks

@natarajanknr

This comment has been minimized.

Copy link

natarajanknr commented Apr 20, 2015

Thanks its working fine..

@prashantpalikhe

This comment has been minimized.

Copy link

prashantpalikhe commented Apr 30, 2015

Since the callback is purely DOM related, there is no need to trigger digest cycle after the input is focussed. So, passing third argument (invokeApply) to $timeout() as false would be a better approach imo.

@magm84

This comment has been minimized.

Copy link

magm84 commented Jul 1, 2015

thanks

@mudroljub

This comment has been minimized.

Copy link

mudroljub commented Jul 30, 2015

Very clean and cool 👍

@jonkri

This comment has been minimized.

Copy link

jonkri commented Jul 30, 2015

The lack of an open source license prohibits me from using this. Licensing this under the MIT license (the same license as AngularJS is licensed under) would be great.

@mlynch

This comment has been minimized.

Copy link
Owner Author

mlynch commented Dec 8, 2015

It's MIT Licensed

@BenjaminConant

This comment has been minimized.

Copy link

BenjaminConant commented Jan 8, 2016

Hey ... just found this after writing my own solution ...

angular.module('finnApp')
  .directive('angularAutoFocus', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.focus();
      }
    };
  });

any chance you can explain why you are using element[0] ... instead of just element. Also reasoning for the $timeout .. would prefer to not have it if it is not necessary.

for context I have only tired this on inputs while using uirouter and running into wonkyness with html5 autofocus

@blaise-io

This comment has been minimized.

Copy link

blaise-io commented Feb 10, 2016

@BenjaminConant: .focus() (without [0]) only works when you have jQuery loaded. The $timeout is required because at execution time, the element may not be present in the DOM yet.

@eyupaltindal

This comment has been minimized.

Copy link

eyupaltindal commented Feb 21, 2016

thanks 👍

@BenjaminConant

This comment has been minimized.

Copy link

BenjaminConant commented Mar 30, 2016

@blaise-io thanks much!

@ortichon

This comment has been minimized.

Copy link

ortichon commented Apr 10, 2016

Great, thank you

@aarongray

This comment has been minimized.

Copy link

aarongray commented May 27, 2016

This directive was working great with an earlier version of Angular 1.4, but I recently upgraded to Angular 1.4.10, and started getting this error: Uncaught TypeError: $exceptionHandler is not a function. The solution was to inject $exceptionHandler in addition to $timeout into the directive. I believe this is because $timeout delegates any exceptions that occur within the function to the $exceptionHandler.

See: https://docs.angularjs.org/api/ng/service/$timeout

@MarcMouallem

This comment has been minimized.

Copy link

MarcMouallem commented Jul 1, 2016

Like a boss!

@iuprade

This comment has been minimized.

Copy link

iuprade commented Sep 6, 2016

awesome

@DrakeXiang

This comment has been minimized.

Copy link

DrakeXiang commented Apr 5, 2017

The $timeout to the rescue!!!

@sokhomhuy

This comment has been minimized.

Copy link

sokhomhuy commented Apr 7, 2017

awesome

@maxthevoice

This comment has been minimized.

Copy link

maxthevoice commented Jun 13, 2017

Thanks!

@joryschmidt

This comment has been minimized.

Copy link

joryschmidt commented Feb 11, 2018

wonderful, thank you sir

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.