Follow last post

The work around is unnecessary, the only important thing is the clicked element must be an input element. The best practice will be put a transparent input overlay on any other element.

--

Feng

angular way to popup ios keyboard after clearing field

Use directive is a proper way to set focus on an input field. Thus setting the bound data will do the job instead of setting the element itself.

.directive('autoFocus', function($timeout) {

    function link(scope, element, attrs) {

      scope.$watch(attrs.autoFocus, function(value) {

 if (value){

 $timeout(function(){element[0].focus();});

 }

      });

    }

    return {

      link: link

    };

});

This does not work on iOS because the focus() needs to be called within a click() event.

So, in the click function, we can set the focus on any input field to popup the keyboard.

$scope.reset = function(unit) {

unit.value = null;

$ionicListDelegate.closeOptionButtons();

focusUnit.hasFocus = false;

//work around to popup keyboard on focus on ios devices

if (ionic.Platform.isIOS()){

if (!document.activeElement.hasAttribute('auto-focus')){

//Set focus to the first input element to popup keyboard.

//the ios keyboard will only be popup inside a click event with focus

//Then the watcher will set the focus to correct element.

setTimeout(function(){

document.getElementsByClassName('unitInput')[0].focus();

},0);

}

}

$timeout(function(){

unit.hasFocus = true;

focusUnit = unit;

});

};

Then the directive will move the focus to the correct field.

There is one problem here on iOS8. The keyboard will popup, but immediately slide down again, keyboard flashes on the screen.

The reason is that the div element bound with click event cannot get focus, it passes the focus to the body element.

1. Click event -> clicked element gets focus, set focus to the input by code, input get focus, keyboard popup

2. The div element passes the focus to body, body get the focus, input loses the focus, keyboard disappear.

The solution, use an input button instead of a div, then use css to fix the button look. Because the input button can get focus (become document.activeElement), the second step will not happen.

FYI: code works, theory may be wrong.

--

Feng