Keyboard "Send" button error

[billnye123]

Hey guys. Ran into a small problem here and I hope you guys can help me out. I have attached 2 screenshots. In the first screenshot, when I press the send button (->) on the emulator keyboard, the click event for the hidden send button is activated and the message is sent. This is correct.

The problem occurs in the second screenshot, where I add a new disconnect button. In the second screenshot, the send button on the keyboard activates the click event for the disconnect button, instead of the send button.

I have 2 questions:

1. How can I make sure the send button on the keyboard activates the “send” button click event instead of the disconnect click event?

2. How can I implement a feature where on click, the words in the “disconnect” button change from “disconnect” to “really?” and then when the user clicks the “really?” button the click event is fired? This is to act as confirmation that the user really wants to disconnect.

<ion-footer>
  <form #f="ngForm">
    <ion-grid>
      <ion-row>
        <ion-col col-4>
          <button ion-button full (click)="onDisconnect()">Disconnect</button>
        </ion-col>
        <ion-col>
          <ion-input [(ngModel)]="chat" name="chatText" required placeholder="Type Here..."></ion-input>
          <button style="position: absolute; left: -9999px; width: 1px; height: 1px;" (click)="chatSend()">Send</button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-footer>

[billnye123]

Anyone has any tips?

[cherry]

Could you provide more information about your code in the .ts file ?

What you could do to hotfix your “disconnect” to “really” problem is.

    <ion-col col-4>
      <button ion-button full (click)="onDisconnect()" id="disconnect" style="display:block">Disconnect</button>
      <button ion-button full (click)="onReally()" id="really" style="display:none">Really</button>
    </ion-col>

In typescript add this code to your function when you want to show the really button.

yourFunction(){
document.getElementById(‘really’).style.display = ‘block’;
document.getElementById(‘disconnect’).style.display = ‘none’;
}

Like i said this is just a very simple way todo it and there are alot better ways todo this.