I’m creating an app with a chat room and when I submit a new message it blurs the input field and the keyboard slides down. What would be a good way to keep the focus on the field and keep the keyboard up?
I started out with the autofocus html tag and that makes the input field start autofocused in the browser but not in the emulator or device. Then I tried ng-focus="true" and ng-focus="contentFocus" and set it true before and as a callback to the POST call and still no dice.
I’m going to guess that you are using iOS. If so, by default iOS does not allow any keyboard interaction except for when an input field is tapped.
To override this, you need to put this in you config.xml:
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
I’m doing android and iOS. I saw this preference, but just changing it doesn’t make the keyboard stay up. Is there a way to prevent it going down upon submit?
I don’t believe so. I’ve never seen any means of directly controlling the keyboard. Even the new Ionic keyboard plugin doesn’t directly control showing the keyboard. Although it can hide it.
Ok I’ll keep searching.
For an example of the effect I am going for, just open the text message app or facebook messanger on an iPhone. The keyboard is just always up and the focus is always on the new message content field.
Thanks!
What I found works well is to reset the focus back to your text input right after the button gets clicked. That way, the keyboard doesn’t have time to hide and appears to stay in place between submits.
Here’s a directive I modified to auto refocus whenever your input blurs:
angular.module('msgr').directive('isFocused', function($timeout) {
return {
scope: { trigger: '@isFocused' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
$timeout(function() {
element[0].focus();
element.on('blur', function() {
element[0].focus();
});
});
}
});
}
};
});
Now if you pass true to the is-focused attribute, the keyboard should always stay up.
Hope that helps.
I had the same problem and that works fine for me, thanks !
When and How did you set the isFocused to false?
I initially set isFocused to false when my controller gets instantiated by using a scope variable. I noticed that there can be some taring on the animation if there’s a lot of elements to draw, so I wait until I’ve loaded everything in the view and then set isFocused to true to bring up the keyboard. If you don’t want the keyboard to come up immediately, you can just set isFocused to true when the user click the input box.
In the case of chat/messaging app, I’ve also found it useful to set isFocused to false when a user clicks on the list of messages so they can scroll through them easier, but then set isFocused to true again if the user clicks the input box.
Hope that answers your question.
Yes, just add ng-click to my ion-content and then set isFocused to false
I set focus back immediately too, but the keyboard does slide down first, and then quickly jumps up. Did you create a workaround for that?
What platform are you working with? I should have added a caveat that I only tested this against iOS.
I tested against the iOS emulator with cordova emulate ios
I’m using the posted directive unmodified and not seeing an issue in the iOS simulator or on a device. Can you post your template and any code you use to change the isFocused value?
Why using a $watch? It’s impact performance for nothing…
‘use strict’;
angular.module("directives.detectFocus", [])
.directive("detectFocus", function () {
return {
restrict: "A",
scope: {
onFocus: '&onFocus',
onBlur: '&onBlur',
focusOnBlur: '=focusOnBlur'
},
link: function (scope, elem) {
elem.on("focus", function () {
scope.onFocus();
scope.focusOnBlur = true; //note the reassignment here, reason why I set '=' instead of '@' above.
});
elem.on("blur", function () {
scope.onBlur();
if (scope.focusOnBlur)
elem[0].focus();
});
}
}
});
I have written this directive that takes 3 arguments:
Two are functions that should happen on focus or blur.
The last is the conditional that specifies whether the keyboard should be hidden.
To use it:
In my controller, I init this variable:
$scope.focusManager = { focusInputOnBlur: true};
=> Caution! the ‘dot’ syntax (with focusManager) is mandatory, otherwise, this line:
scope.focusOnBlur = true would dissociate the initial object!
In my HTML template, I init the input field like this:
In order to hide the keyboard ONLY when the messages list (on the ion-content) is clicked, I do this:
This function is set in my controller merely like this:
$scope.shouldNotFocusOnBlur() = function() {
$scope.focusManager.focusOnBlur = false;
};
Rule is: Avoid any $watch when no need 
Hope that helps
My keyboard disappears then popup again, is there a way to prevent that?
G’day,
I’ve got a simple 1 textfield web form that I use for stocktake. I submit a product code, and then a location code (same text field, two different instances), and the database pairs the two.
I have an iPad (iOS 8) partnered to a bluetooth scanner to speed up the job, but have now hit the road block of the fact that the webpage won’t focus back in on the text field after the submit, requiring a manual tap on the field to enter the next scan. as you can imagine, this is counterproductive, and slows the process rather than hasten it.
Will the solutions discussed above, trick the iPad into reactivating the text field in an iOS 8 device?
I’m not a programmer, so can’t tell from the thread if this will solve our problem, but before I send this thread to our programmer, I want to check I’m not wasting his time.
thanks guys
So you’d rather waste other peoples time? Just send it to your programmer who will be able to evaluate if it will help in your scenario
Thanks cannycookie, i realise now that i didn’t word my question the best.
Unfortunately the programmer i have access to has put the issue in the “too hard” basket, explaining to me that auto focus cannot be achieved in iOS devices because apple don’t want you to stuff up the ability to read a page with a force pop-up keyboard.
I was hoping someone out there might have discovered a work around apple’s in built block, a solution that enables a webiste to autofocus an iOS device, and if so, that would be the lead I need to restart this conversation with my programmer.
However, I’m guessing by the lack of responses to my query that no such solution exists.
