Angular 2:在输入时模糊contenteditable div

Question

我有一个可满足的div,看起来像这样:

 <div class="wall-title col-sm-12" 
        [attr.contenteditable]="wall.title && wall.title !== 'Favorites'" 
        (blur)="wallNameChanged($event.target.outerText)"
        (keyup.enter)="wallNameChanged($event.target.outerText)">
           {{wall.title}}
 </div>

当用户在编辑div内容后按Enter键时,我想模糊div.目前,正在添加新行字符,并且在UI中可以看到新行.

我该如何实现这一目标？

Answer 1

在你的组件中：

onEnter($event){
  $event.target.blur()
  $event.preventDefault()
  this.wallNameChanged($event.target.outerText)
}

在你的模板中：

<div class="wall-title col-sm-12" 
             [attr.contenteditable]="wall.title && wall.title !== 'Favorites'" 
             (blur)="wallNameChanged($event.target.outerText)"
             (keyup.enter)="onEnter($event)">
            {{wall.title}}
</div>