防止按Enter在Angular4中创建新行

Posted 2023-03-05

【中文标题】防止按Enter在Angular4中创建新行

【英文标题】：Prevent press enter from creating new line in Angular4

【发布时间】：2019-05-25 04:34:17

【问题描述】：

我有一个文本区域，我在按 Enter 时提交

https://stackblitz.com/edit/angular-uvxifq-uyxteg

<textarea class="message-area" (keyup.enter)="ValidateCommentAndPost(commentErr, $event);" [(ngModel)]="comment" matInput #commentErr="ngModel"></textarea>

我想在按回车时禁用新线路，所以我在网上获取了一些信息并做了。

ValidateCommentAndPost(ngComment:NgModel, event?:KeyboardEvent)
    event.preventDefault();
    if((ngComment.invalid && (ngComment.dirty || ngComment.touched)) && ngComment.errors) 
        this.ResetComment();
     else 
        this.PostComment();
    

但这不起作用，return false; 仍然会创建一条白线。

我能做什么？

【问题讨论】：

Angular 2 (keydown.enter) can not preventDefault()的可能重复

【参考方案1】：

添加事件以捕获进入并阻止默认行为。 将 keydown 事件添加到您的组件 html

<textarea required
(keydown.enter)="onKeydown($event)" (keyup.enter)="ValidateCommentAndPost(commentErr, $event);" pattern="/^[/\S/]+$/i" [(ngModel)]="value" matInput #commentErr="ngModel"></textarea>

并将其添加到您的组件 ts 文件中

onKeydown(event)
      event.preventDefault();
    

【讨论】：

这个太傻了啊啊啊，谢谢。我完全忘记了新行适用于按键...谢谢

我回应了 keydown 观察。我使用keyup无济于事