Angular autofocus directive for touch devices

Question

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();
      });
    }
  }
}]);

@pankajparkar It works on non-touch devices, enters the input that I tell it to. However if I go to the site on my phone it doesn't autofocus. I'm not sure why it wouldn't just because it's a touch device. Perhaps it's the way that focus() fundamentally works? — Chrillewoodz, Mar 17 '15 at 12:23
did you try with `autofocus` attribute of form field? http://www.w3schools.com/html/html_form_attributes.asp — Pankaj Parkar, Mar 17 '15 at 12:49
@pankajparkar Yes but that doesn't work with dynamically added pages unfortunately so since I'm using angular it fails. — Chrillewoodz, Mar 17 '15 at 13:06
@chillerwoodz what do you mean by dynamically added pages.. try this http://stackoverflow.com/a/14837021/2435473 — Pankaj Parkar, Mar 17 '15 at 13:11
@pankajparkar Content added through AJAX. Angular does everything using AJAX that's why it doesn't work unless I use a custom directive as a substitute. — Chrillewoodz, Mar 17 '15 at 13:19
@pankajparkar Yes, but I still don't think that standard autofocus works for touch devices. — Chrillewoodz, Mar 17 '15 at 13:28
did you looked at https://docs.angularjs.org/api/ngTouch this, they might have handle it — Pankaj Parkar, Mar 17 '15 at 13:36
@pankajparkar I did, but it doesn't help unfortunately. It appears that autofocus isn't do-able on touch devices for now, but the last answers to this question is from 2011-2013, so I can't know for sure. Seems odd that they wouldn't have fixed this issue yet. — Chrillewoodz, Mar 17 '15 at 13:41

score 1 · Answer 1 · answered Nov 12 '15 at 12:11

If you're trying this on an iOS device: Apple won't let you auto focus on an element without the user explicitly expressing the intention to. This is because of a setting KeyboardDisplayRequiresUserAction which is true for Mobile Safari.

This is a usability decision on Apple's part and at present there is no workaround for it.

score 1 · Accepted Answer · answered Oct 26 '16 at 21:09

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.

Angular autofocus directive for touch devices

2 Answers2