Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular: Blur input on enter

I got an editable oneline headline like this:

<h1 class="headline" contenteditable="true" [textContent]="headline.name" (input)="headline.name=$event.target.textContent" (keydown.enter)="submit();false">

However, when I hit enter the input field keeps its focus. How can I make it lose focus on enter?

like image 978
ver.i Avatar asked Jan 09 '18 16:01

ver.i


People also ask

How do you blur input on enter?

If you want to fire blur event with key enter event, then simply pass $event in function and $event. target. blur(); in the function.

What is the difference between Blur and Focusout?

The focusout event fires when an element has lost focus, after the blur event. The two events differ in that focusout bubbles, while blur does not. The opposite of focusout is the focusin event, which fires when the element has received focus.

What does Blur do in angular?

Definition and Usage The ng-blur directive tells AngularJS what to do when an HTML element loses focus. The ng-blur directive from AngularJS will not override the element's original onblur event, both the ng-blur expression and the original onblur event will be executed.

What is Keyup event in angular?

(keyup): (keyup) is an Angular event binding to respond to any DOM event. It is a synchronous event that is triggered as the user is interacting with the text-based input controls. When a user presses and releases a key, the (keyup) event occurs.


1 Answers

As yurzui pointed out in the comments:

(keydown.enter)="$event.target.blur();submit();false"
like image 181
ver.i Avatar answered Sep 20 '22 00:09

ver.i