Angular 2: blur contenteditable div on enter

Question

I have a contenteditable div that looks like this:

 <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>

When the user presses enter after editing the div content, I want to blur the div. Currently, a new line character is getting added and a new line is visible in the UI.

How do I achieve this?

Answer 1

You need to prevent the default operation: ( which in this case is to add new line )

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

I do this which seems to work.

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

Then in typescript:

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

Answer 3

in your component :

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

in your template :

<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>