How do you autofocus on an input text field that makes keyboard showing up when enter the page

Ionic Framework ionic-v3
1

I got a modal with just an input textarea. I want to make the keyboard popup automatically with cursor focused on the input as soon as the page launches.
I tried to add autofocus on the html, does not work
Also I tried:

onPageDidEnter(){
  this.element.nativeElement.querySelector('textarea').focus();
}

I got weird issue on iphone.

How do I do that?

1 Like
2

So it’s probably best not to use autofocus.
Autofocus behaves very differently across platforms and can cause a lot of issues, especially on mobile. You might want to avoid it

3

Exactly the same circumstances and the same problem here.
If you finally find a solution, please share it. :wink:

2 Likes
4

Found any solutions ?

5

Here is a directive I found that seems to work well on both Android and iOS.

.directive('focusMe', ['$timeout', function ($timeout) {
	return {
		link: function (scope, element, attrs) {
			if (attrs.focusMeDisable === true) {
				return;
			}
			$timeout(function () {
				element[0].focus();
				if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
					window.cordova.plugins.Keyboard.show(); //open keyboard manually
				}
			}, 350);
		}
	};
}])

html

<input type="text" focus-me focus-me-disable="showInput" ></textarea>

6

Also found this one, but havent tried it. https://github.com/ds82/ng-focusme

Just search angular focusme.

Good Luck

Rgecy

7

Finally found a solution !!

8

Or you can try my solution: https://forum.ionicframework.com/t/setting-focus-to-an-input-in-ionic-2/62789/9?u=vishin

9

Thanks Dude. Thank you soo much.