Angular 区分 keydown.enter 移动和桌面文本区域

Question

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

如果用户在文本区域中按下回车键：
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')
}

Angular 区分 keydown.enter 移动和桌面文本区域

Angular Differentiating keydown.enter for textarea in mobile vs desktop

angular

chat

enter