How to deselect input field when tapping return on mobile keyboard (iOS)

Question

I haven't tested this yet on Android, but on iOS, I know for sure it's not working.

I have an input field where people can write stuff. I want to deselect (remove the focus) the input field when someone taps on "enter" on the native iOS keyboard... yet it does not work. It just keeps it's focus on the input field, while I want to get rid of the focus on the input field.

I am using Angular / HTML / Ionic / pure JavaScript. I have a lot of input fields, so am using classnames. Is there a way to achieve this?

You can see the input fields here and the keyboard beneath.

Answer 1

You can just listen to the keydown event of the input box and check whether the event's keyCode is 13 (key code of enter). When this happens you can just call the blur() method of the input element.

It would look like this.