Angular:自定义键盘动作

Question

在文本区域中，我想自定义换行操作。默认行为是通过点击回车来定义的，我想在点击Alt+enter时编程换行操作。

Answer 1

您可以使用(keydown.alt.enter)和(keydown.enter)事件。如果你的文本区域使用[(ngModel(]，你可以有一些类似的

<textarea #textArea #textAreaModel="ngModel" 
[(ngModel)]="value" 
(keydown.alt.enter)="altEnter(textArea,textAreaModel)"
(keydown.enter)="$event.preventDefault();enter()">
</textarea>

请注意，您将传递给函数"；altEnter"；text区域"；(HTMLElement(和"；text区域模型"；("型号"(

如果你使用ReactiveForms，你可以有一些类似的

<textarea #textArea [formControl]="control" 
(keydown.alt.enter)="altEnter(textArea,control)"
(keydown.enter)="$event.preventDefault();enter()">
</textarea>

请注意，在这种情况下，您将"；text区域"；(HTMLElement(和formControl"；控制"；

你的功能就像

enter(){
console.log("enter")
}
altEnter(element:any,control:any){
const start=element.selectionStart; //get teh Selection start and end
const end=element.selectionEnd;
let value:string[]=element.value.split('')
value.splice(start,end-start,'n')
if (control.control)
control.control.setValue(value.join(''))  //give value to the ngModel
else
control.setValue(value.join(''))   //give value to the formControl
setTimeout(()=>{
element.selectionStart=element.selectionEnd=start+1 //position the cursor
})
}

你可以在这个堆叠式中看到这两种情况