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

您需要阻止默认操作:(在这种情况下是添加新行）

wallNameChanged($event) {
  $event.preventDefault();
  $event.target.blur();
  // remove extra lines
  let text = $event.target.outerText.replace(/(\r\n|\n|\r)/gm,"");
  // do whatever you need with the text
}

<div (keyup.enter)="wallNameChanged($event)">
   {{wall.title}}
</div>

Answer 2

在您的组件中：

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>

Answer 3

我这样做似乎有效。

<div contenteditable="true" (keydown.enter)="onEnter($event)" />

然后在打字稿中：

  onEnter($event) {
    $event.preventDefault();
    this.sendMessage();
  }

Answer 4

您可以通过暂时更改模型wall.title的值来实现此目的（通过在末尾添加空格并在0ms之后删除它：P）强制角度刷新div DOM元素：

所以将模板更改为：

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

在组件代码中：

public finishEditTeamName(event) 
{    
    event.target.blur();
    let str = this.wall.title;
    this.wall.title = str + ' ';
    setTimeout( () => {
        this.wall.title = str;
    }, 0);
}