我有一个令人满意的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中可以看到新行。
我如何实现这一目标?
答案 0 :(得分:3)
您需要阻止默认操作:(在这种情况下是添加新行)
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>
答案 1 :(得分: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>
答案 2 :(得分:1)
我这样做似乎有效。
<div contenteditable="true" (keydown.enter)="onEnter($event)" />
然后在打字稿中:
onEnter($event) {
$event.preventDefault();
this.sendMessage();
}
答案 3 :(得分:0)
您可以通过临时更改模型wall.title
的值(通过在末尾添加空格并在0ms之后删除它来实现)来实现此目的:强制角度刷新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);
}