Angular 2:Enter上可满足的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(/(rn|n|r)/gm,"");
  // do whatever you need with the text
}
<div (keyup.enter)="wallNameChanged($event)">
   {{wall.title}}
</div>

Answer 2

我这样做似乎有效。

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

然后在打字稿中：

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

Answer 3

在您的组件中：

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 4

您可以通过临时更改模型wall.title的值来实现此目标（通过在末端添加空间并在0ms之后添加空间：P）将其删除：plostort ang angular to angular to Angular to Refresh 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);
}