Chrillewoodz Chrillewoodz - 1 month ago 17
AngularJS Question

Angular autofocus directive for touch devices

I'm using a directive for autofocusing on an input, but it doesn't appear to be working on touch devices. From my searches I haven't found any solutions that would also apply to touch devices.

How can I expand this directive to also work on touch devices?

'use strict';

shoppingApp.directive('autofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
link : function($scope, $element) {
$timeout(function() {
$element[0].focus();
});
}
}
}]);

Answer

Are you using ngTouch in your app? Your code works for me & autofocuses on Chrome on Android if ngTouch isn't loaded in the app, but if ngTouch is used, not only does it not work, sometimes it makes the input completely unfocusable by de-focusing as the input is manually clicked on. [facepalm]

I think its this issue with ngTouch, which has now been fixed. Updating to Angular 1.5.2 solved the issue for me.

As @jorisw mentioned, I don't think its possible to get autofocus to work on any iOS devices - the input is focused, but the on-screen keyboard doesn't appear, so the user has to manually click the input.