Angular 区分 keydown.enter 用于移动与桌面中的 textarea

Question

我目前正在开发一个聊天平台，带有一个使用 textarea 的消息输入框（用户在其中输入他/她的消息）。按 Enter 键允许用户发送消息。但是，我想知道是否可以区分桌面视图和移动视图的 Enter 键行为，就像这样 -

如果用户在 textarea 字段中按下回车键：
1. 桌面视图：用户可以发送消息
2.移动端视图：textarea字段新建一行，不发送消息

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();
}

感谢您的帮助！

Answer 1

如果你需要查看屏幕大小，可以试试matchMedia

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