用javascript中断表单中的输入文本行

Question

我设计了一个表单，它接受输入文本并将其存储为字符串，问题是，如果用户点击"Enter"，文本不会换行，而是会一起显示！我该怎么修我正在使用angular6框架和typscript，我想知道管道是否可以解决这个问题？

Answer 1

您无法管理文本框中的'enter'键。要查看输入字符串中的enter键，必须使用textarea(可以将其设置为文本框样式(，如

HTML:

<textarea type="text" #elem></textarea><br/>
<button (click)="checkValue()">Click to see the value</button>
<div *ngIf="value!=''">
You have typed:<p style="white-space: pre-wrap;">{{value}}</p>
</div>

TS:

export class AppComponent  {
@ViewChild("elem") inputChild: ElementRef;
value='';
checkValue(){
this.value= this.inputChild.nativeElement.value;
}
}

Stacklitz演示

使用ngModel更新

HTML:

<textarea [(ngModel)]="value" #elem></textarea><br/>
<div *ngIf="value!=''">
You have typed:<p style="white-space: pre-wrap;">{{value}}</p>
</div>

TS:

export class AppComponent  {
@ViewChild("elem") inputChild: ElementRef;
name = 'Angular 6';
value='';
}

更新的演示

Answer 2

所以，似乎有很多方法可以做到这一点，我选择的是

<p style="空白：预包装；">｛｛user.Diagnosis｝｝<p>

它似乎只涉及一些造型(空白和预包装(

感谢所有的帮助，特别是Rohan Kumar