Auto-focus Textbox while template loads

ionic-v1
22

When I use these directives, everything works fine. I get a focus on the first field.
But after a modal window has poppedup , how do I return the focus again to that inputfield?

23

Hello All,
I want to have this functionality on modal popup, I tried above above code however no luck.
can some one please let me know how to do this

24

I tried your code above however i didnt got success.
I dont know what I am doing wrong

My code is

<label class="item-input-wrapper" focus-me >
  <input type="text" id="pass" ng-model="query" ng-change="enterpasscompleted()" maxlength="4" placeholder="- - - -"  style="text-align:center;"   pattern="[0-9]*">
</label>

NightApp.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      $timeout(function() {
        element[0].focus(); 
      }, 150);
    }
  };
});

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

Any help is appreciated

25

i have the same problem.

I get the focus on the textarea but the keyboard does not show up

26

hope this will solve your issue.

NightApp.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      $timeout(function() {
        element[0].focus(); 
        if(ionic.Platform.isAndroid()){
           cordova.plugins.Keyboard.show();
        }
      }, 150);
    }
  };
});
1 Like
27

Thanks!
Does this work with IOS as well?

28

Yes! this will work with IOS as well.

29

Thanks!
but should i write somenthig like:

ionic.Platform.ionic.Platform.isIOS() ?

Because i tried and it works without writing that :smiley:

30

No need for that because when auto-focus an input in ios it automatically opens up keyboard. While in android you need to open keyboard forcefully. :smile:

1 Like
31

if it is an input type=ā€œnumberā€ keyboard shows but it isnā€™t number keyboard

33

Hi Iā€™ve executed ā€˜ionic run ios --deviceā€™ and finally had a chance to try on my iphone it works fine. Ionic view, browsers and emulators should not be fully trusted I think. Thanks @mhartington.

1 Like
34

I had this working until I switched over to ngCordova for my keyboard plugin:

.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      $timeout(function() {
        element[0].focus(); 
        if(ionic.Platform.isAndroid()){
           cordova.plugins.Keyboard.show();
        }
      }, 150);
    }
  };
});

So I tried this, but it was acting quirky on iOS:

.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      $timeout(function() {
        element[0].focus(); 
        if(ionic.Platform.isAndroid()){
           $cordovaKeyboard.show();
        }
      }, 150);
    }
  };
})
35

thnx u all, great solution using directive,

when I use these directives, everything works fine. I get a focus on the input field and keyboard shows up.
But when i use same in ion-header-bar focus and keyboard shows up only once, when second time i render it wont workā€¦,
i guess header DOM structure renders only once thtz y its not workingā€¦

Any help is appreciated

36

I created a bower component as I was experiencing the same issue. This is what fixed it for me. I wait for the view to be entered before I try to focus the element. This keeps a transition bug from happening that I experienced from using the $timeout method.

It can be installed with bower install ionic-auto-focus.

Please let me know if this does or does not work for you.

Adam

1 Like
37

hi Adam, I tried your bower component code on android however i didnt get success. :confused:

38

heyā€¦ i have used autofocus ā€¦ but it gives you focus only once but after that when you come again on that page it is not workinā€¦ why?

39

hi
in case of windows app keyboard is not appearing automatically in 1st visit to page ,although search field is getting focussed.
but when i go back n return to same page again ,keyboard is coming up automatically.what to do in order to make keyboard appear automatically in 1st visit also???

40

You have to include the $cordovaKeyboard dependency on the directive.

41

Where i add the JS .directive? I try to add in the app.js and controllers.js, and i got a blank page in my appā€¦

42

Hi,

I have followed the same thing but I am not getting keyboard and auto focus on input box in ios. My input box is in navigation header. Can you please help me?

   <ion-nav-title>
         <input id="searchInput" type="text" placeholder="Search" control="control" ng-model="search.value" auto-focus/>
    </ion-nav-title>

    .directive('autoFocus', ["$timeout", function($timeout) {
       return {

	   link: function(scope, element, attrs) {
		$timeout(function() {
				element[0].focus();
				if(typeof(cordova) != "undefined") {
					cordova.plugins.Keyboard.show();
				}
			}, 150);
	}
};

}])