CODEWITHSUNDEEP
htmlangularjscordovaionic-frameworkandroid-softkeyboard
Sletheren
Sletheren

Reputation: 2476

keep keyboard open on Ionic when button click ( chat app )

I have an Ionic v1 chat application, I made everything, but I encountred the famous problem when clicking on a send button (send chat) the keyboard loses focus from the input and then closes.

I've tried many approaches, but it none of them work:

Any help is much appreciated.

<div class="sender">
<input type="text" ng-model="..." class="...">
<div class="button-send">
<span class="send-chat"><i class="ion ion-send"></i></span>
</div>
</div>

Upvotes: 7

Views: 6284

Answers (5)

Tajuddin
Tajuddin

Reputation: 1

try the same code It will 100% work

<ion-input #input placeholder="Type a message.." (blur)="input.focus()">

Upvotes: 0

Deepika Wadhera
Deepika Wadhera

Reputation: 320

(mousedown)="doSomething(); $event.preventDefault()"

works with latest Ionic version too.

Upvotes: 0

shanthan
shanthan

Reputation: 612

just use (mousedown)="sentMessage(); $event.preventDefault()"

<ion-button (mousedown)="sentMessage(); $event.preventDefault()">
      <ion-icon ios="ios-send" md="md-send"></ion-icon>
</ion-button>

Upvotes: 9

Sletheren
Sletheren

Reputation: 2476

ALright found a fix! for all of you out there, who are using ionic for a chat like app, and want the keyboard to stay focused after clicking on a button,

Just, replace the button by a label with for="inputID" like so:

<div class="sender">
<input id="inputID" type="text" ng-model="..." class="...">
<div class="button-send">
<label for="inputID" class="send-chat"><i class="ion ion-send"></i></label>
</div>
</div>

Upvotes: 5

Marouan
Marouan

Reputation: 217

Try forcing the keyboard to open via it's cordova plugin https://github.com/ionic-team/ionic-plugin-keyboard#keyboardshow

Upvotes: -1

Related Questions