CODEWITHSUNDEEP
angularchatenter
iBlehhz
iBlehhz

Reputation: 586

Angular Differentiating keydown.enter for textarea in mobile vs desktop

I'm currently developing a chat platform, with a message input box using textarea (where the user types his/her message). Pressing the Enter key allows the user to send a message. However, I would like to know if it's possible to differentiate the Enter key behavior for desktop view and mobile view, like so -

If user presses the enter key in the textarea field:
1. Desktop view: user is able to send the message
2. Mobile view: a new line is created in the textarea field, message is not sent

message.component.html

<textarea autosize [minRows]="1" [maxRows]="10" [(ngModel)]="messageToSend"
    (keydown.enter)="sendMessage($event)" placeholder="Type a message"></textarea>

message.component.ts

sendMessage(event: KeyboardEvent) {
    const message: Message = {
      id: this.id,
      date: new Date(),
      body: this.message,
    };
    this.chatService.sendChatMessage(id, message).subscribe();
}

Appreciate your help!

Upvotes: 4

Views: 320

Answers (1)

Vova Bilyachat
Vova Bilyachat

Reputation: 19474

If you need to check screen size then you can try matchMedia

if (window.matchMedia('screen and (max-width: 768px)').matches) {
   console.log('Screen is less then 768')
}

Upvotes: 2

Related Questions