Prevent IOS first login in autofocus when opening page

Our application has a page with one input field. When you enter this state on iOS, the keyboard automatically appears. This is not what you need. This does not happen in the Android version.

I've tried all sorts of things, but it doesn't sort anything. My last attempt was to call $cordovaKeyboard.close()

in the app.js launcher in the handler $stateChangeSuccess

. Alas, nothing.

Any pointers would be greatly appreciated!

There isn't much to introduce code terms. Violating input:

<ion-item class="item-input-inset">
  <label class="item-input-wrapper bg-light-grey-30 text-center">
    <input type="text" class="text-center tracker" ng-model="values.exploreSearch" placeholder="Enter city, street, username or keyword"/>
  </label>
</ion-item>

      

And the JS in a block $ionicPlatform.ready

in the main launcher app.js:

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, error) {
  if (window.cordova && $cordovaKeyboard.isVisible) {
    $cordovaKeyboard.close();
  }
});

      

I previously tried to put a block in a page controller that looked like this:

$ionicPlatform.ready(function () {
  if (window.cordova && $cordovaKeyboard.isVisible) {
    $cordovaKeyboard.close();
  }
}]);

      

This last block, according to my client (since I don't have an IOS device to test), worked the first time the page was loaded, but not thereafter. If you left the page and returned, the keyboard will appear.

+3


source to share


1 answer


I had the same problem and it seems to have something to do with the way the iOS browser dispatches click events (more details here: http://blog.ionic.io/hybrid-apps-and-the-curse-of-the- 300ms-delay / )

The way I handled this was to hide my form at $ stateChangeStart and then show the form 400ms later. A slightly better way is to have a transparent div covering whatever you hide 400ms after $ ionicView.enter.



<div style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1000;" ng-hide="showFields" class="ng-hide"></div>

      

+3


source







All Articles