Hello All,
I want to autofocus my textbox and keyboard should appear automatically while template loads as in the picture below.
Any suggestions??
2 Likes
hello Ionic geeks,
why i am not getting answer to this?
Is my question is not clear or there is not solution to this?
Thanks,
Lomas Joshi
Hi Lomas,
maybe I didn’t unterstand your question right but
have you already tried to add autofocus to your input field?
Like:
<input type="search" autofocus />
Hello Hum,
Thanks for the reply but unfortunately i already had used autofocus. it’s not working…
I need textbox is focused and keyboard should be open(or shown) as in the picture. while app loads.
Thanks,
Lomas Joshi
Hi Lomas,
have you tried to put your input into the sub-header?
<ion-header-bar class="bar bar-subheader item-input-inset">
<div class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" autofocus />
<button class="button button-icon ion-ios7-close-empty input-button"></button>
</div>
</ion-header-bar>
I tried this and it worked.
In the content it doesn’t work for me too.
@Lomas, you can do this .
.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function() {
element[0].focus();
});
}
};
});
Then add this to the config.xml
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
6 Likes
Thanks Mhartingon, for your support…
Regards,
Lomas Joshi
@mhartington : Sorry to say but didn’t worked as expected. Actually the auto focus and keyboard coming up worked but when keyboard is typed, input doesn’t show/display any text. Whats wrong now?
Hmm what version of ionic were you using? I just tested it myself and it works fine. Tested with beta 10 and the nightly builds
I am using beta 10 too. I have tested in IOS 7, and it is not working in right manner. Only if I touch the input area after keyboard is up; the typed text start displaying but when the page is first loaded and keyboard comes up; the typing only add whitespace to input area rather than text.
Ah alright, I found the issue. It has to do how we set focus to the inputs.
Move the directive to be on the label wrapping it. This should resolve everything. Don’t forget to include that config.xml file.
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
3 Likes
Hi,
I’m having the same issue. I’m using beta-11.
I put the autofocus directive on the lable and also set the config.xmll option.
When the view get’s rendered I want the Search field in the header get autofocus and the keyboard to open. However it’s not working.
Here is my HTML.
Any tips would be greatly appreciated. I also tried creating a special directive. That didn’t work either.
<div class="bar bar-header has-footer item-input search-bar">
<label class="item-input-wrapper" autofocus>
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search"
autofocus
ng-model="searchKey">
</label>
<a class="button button-icon icon ion-ios7-close-outline"
ng-click="clearSearch()">
</a>
</div>It’s not suggested to use to use html’s autofocus attribute. As it messes with our keyboard logic.
The directive is really the best way to go. You can add 150ms to the $timeout to make sure the view is completely rendered.
.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function() {
element[0].focus();
}, 150);
}
};
});
Then use it like this
<label class="item-input-wrapper" focus-me >
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="searchKey">
</label>
10 Likes
Thanks. That was a huge help.
It’s now working for me on iOS.
Couple of issues I’m seeing though:
One: On iOS, when I click on an item and go into a new nav-view, when I get back to the search view using the back button, the focus is happening automatically, even though I have logic in the directive to not focus. I tried blur but that didn’t make a different. Then I tried debugging the app but connecting Safari to the the phone, and connected, the problem doesn’t happen. Weird.
Do you think it’s timing related?
Two: The autofocus logic that you suggested seems to work on iOS but it’s not working on Android. Do I need to do anything else on Android?
thanks again!
Hi,
Any thoughts or ideas on the issue above?
thanks!
Hmm, whats the logic you have to prevent the focus the second time?
Just tested the directive on an android device and it works fine, at least the version I posted.
Again, could you post your version?
Sure. This is my version:
scope.focusMe is set to true or false by the controller. it’s set to true if there are no search results to show on the page.
That way the keyboard does not open. If there are no previous search results then it tells the directive to focus on the Search window and open the keyboard.
Re the android, issue. The focus is happening but the keyboard is not opening.
.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
console.log("focusMe directive init");
if(scope.focusMe ) {
$timeout(function() {
console.log(" adding focus to element")
element[0].focus();
}, 150);
}
}
};
})
Controller logic: if(Search.previousResults && Search.previousResults.length) {
$scope.focusMe = false;
} else {
$scope.focusMe = true;
}
Hm, want to throw together a codepen? I think I see what could be the issue, but I want to be sure by seeing the directive in your situation.
1 Like
@mhartington: i was looking for slimier directive for weeks, thanks man (y) .
@jammu : Try this
.directive('focusMe', function($timeout) {
return {
scope: {
focusValue: "=focusMe"
},
link: function(scope, element, attrs) {
console.log("focusMe directiveinit " + scope.focusValue);
if( scope.focusValue ) {
$timeout(function() {
console.log(" adding focus to element")
element[0].focus();
});
}
}
};
});
well this worked for me, the field is focused and also the keyboard is opening
2 Likes
Oh it works~thanks