Keep the keyboard up and Focus on text field after submit

Found a good solution: Putting ng-click inside <ion-label> keeps the keyboard open:

			<input type="text" ng-model="name" ng-focus="focus=true" ng-blur="focus=false">
			<ion-label class="icon ion-ios-close" ng-click="resetTextfield()" ng-if="focus"></ion-label>


I have tried Mik378’s solution, it worked perfectly and kept the keyboard OPEN with out any jiggles. But for what ever reason the keyboard was not hiding when I click on the messages DIV I had. Basically the Bi-directional binding with “=” wasn’t working in my case. Thus, the focusOnBlur was always stayed TRUE. I completely understand and using $scope.focusManager… type syntax and made sure the original Object was not getting disassociated.

After a few tries, due to the time limitation I had I used a Shared service to keep this flag and shared it between the directive and my controller and it works perfectly for me.

The directive

.directive("detectFocus", function ($focusTest) {
    return {
        restrict: "A",
        scope: {
            onFocus: '&onFocus',
            onBlur: '&onBlur',
        link: function (scope, elem) {

            elem.on("focus", function () {

            elem.on("blur", function () {
                if ($focusTest.getFocusOnBlur())

The Service

.service("$focusTest", function(){

this.focusOnBlur = true;

this.setFocusOnBlur = function(val){
    this.focusOnBlur = val;
this.getFocusOnBlur = function(){
    return this.focusOnBlur;


Controller part

$scope.shouldNotFocusOnBlur = function() {


<textarea detect-focus rows="1" name="message" ng-model="data.message"></textarea>

Hope this helps.



Thanks, this actually works! Tested with other non-button elements (span, div) but only ion-label has the desired behavior. I’m curious to know why this does the trick, any idea?!

I’m not deep into HTML enough to offer a thorough technical explanation but I think it is because a <label> is not a normal element. Usually you associate it with a form control because it expands the clickable area of that form control (useful in particular for radio buttons or checkboxes which have a very small clickable area). Check out the explanation on Mozilla Developer Network for more detail and a good example.

nice, I had the same issue, but your workaround did the job, nice, now the keyboard hide when I click the messages div. thanks.

I wanted something simpler, so that worked for me :

$scope.refocus = false;
$scope.inputBlur = function () {

    $scope.refocus = false;

Simply set $scope.refocus to true whenever needed and apply the function inputBlur to the input you want to keep focused.

I’am trying to adapt something similar for Ionic 2, here is my best solution as a directive :

import { Directive, ElementRef, Renderer } from '@angular/core';

  selector: '[autofocuser]' 
export class Autofocuser {

  constructor(private element: ElementRef, private renderer: Renderer) {}

  ngAfterViewInit() {
        let element = this.element.nativeElement.children[0]

        element.addEventListener("blur",  () => {
                        this.renderer.invokeElementMethod(ele, 'focus', []);                        


Troubleshootings :

  1. The event “blur” is called 2 times each time the input looses focus, don’t understand why. I can see with the log.

  2. The keyboard has some glitches :

1 Like

What I try to fix that is to use timeout to cover the focus function and then use zipalign to optimize the app.

like this:

$timeout(function() {

Remember to add $timeout to the directive function input parameter.

It almost never happen that issue anymore for me.

Great solution! Thank you so much for sharing. helped alot!

Worked like a charm for me.

Were you able to make this work properly?
I’m getting issues like:

Can’t bind to ‘autofocuser’ since it isn’t a known property of ‘ion-input’.

I’m not sure if i need a different component file or move the ion-input element template to the Autofocuser directive.

My ultimate goal would be for the focus on the input field not to move so the keyboard doesn’t disappear after you click on a button, for example.
This is part of simple chat message view, but this is pretty annoying


I have been battling this issue all morning and this solution worked for me perfectly. Thanks!

Aweasom ! This solution worked for me perfectly.
tank you so much!

//=== controler.js
.controller(‘MyModule’, function( $scope, $timeout) {
$timeout(function() { $(".input")[0].focus(); } });

//=== HTML ==========/
<input id="q" type="text" class="input " >

@edgebal’s comment on the link : helped solve the issue for me

Hello scottg,

How can we implement the same behavior in typescript? Can you give the example?

Thanks man it worked :slight_smile:

works for me… thanks!

@vasanthns Its work for me on android but I did not test on ios. I hope It will be work fine on IOS
Thanks buddy. You are saved my time

add to your click button (mousedown)="$event.preventDefault(); yourFunction()"

1 Like

I even made it simpler but didn’t work. lol. Simply I do document.getElementById("chatInput").focus(); whenever I click to send button but it does nothing.