Angular 2：输入时模糊 contenteditable div答案

【问题标题】：Angular 2: blur contenteditable div on enterAngular 2：输入时模糊 contenteditable div
【发布时间】：2016-12-15 10:50:47
【问题描述】：

我有一个内容可编辑的 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 中可以看到一个新行。

我如何做到这一点？

【问题讨论】：

标签： javascript html angular blur

【解决方案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>

【讨论】：

这当然有帮助。 div 越来越模糊。但是，作为输入的结果，额外的行在 UI 中仍然可见。怎么能隐藏那条多余的线？
您可以使用简单的字符串替换，例如：text.replace(/(\r\n|\n|\r)/gm," ");
FunStuff，字符串替换不起作用，因为数据使用插值绑定到 div 元素。并且用户在 div 上的输入并没有影响模型 wall.title。这是进入和模糊后的 UI 元素的样子。
wall.title = 文字？
试过了。没有帮助。新行字符保持不变。继续我之前的评论：
abcd 123

注意“abcd 123”是如何出现的在下一行？那里有一个换行符。

【解决方案2】：

我这样做似乎可行。

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

然后在打字稿中：

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

【讨论】：

是的，这行得通 :) --- 注意：如果我们想让 preventDefault 生效，我们需要使用 keydown 而不是 keyup

【解决方案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>

【讨论】：

【解决方案4】：

您可以通过临时更改模型 wall.title 的值来实现这一点（通过在末尾添加空间并在 0ms :P 后将其删除），这会强制 angular 刷新 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);
}

【讨论】：