Prevent enter action on IOS return click

Question

I have problems with IOS return key on keyboard (in Safari on iphone for example). I am using vue js in my web application where I have textarea in chat component:

<textarea
        class="field-text__input field-text__input--height-small field-text__input--max-height"
        rows="1"
        ref="messageField"
        placeholder="Your message"
        @keydown.enter.exact.prevent="send"
        @keyup.enter.ctrl.exact="expandTextarea"
        :value="messageText"
        @input="updateMessage">
</textarea>

On desktop browser or android devices message is sent on "Enter" click. But on IOS click on "return" key on keyboard also send message. How I can prevent this action for IOS "return" key? Thanks for any help.

score 1 · Answer 1 · answered Apr 23 '19 at 13:25

1

You would have to create some custom logic inside your send function in order to catch and return(quit) the function if you detect that it is an iOS device.

This stackOverflow answer is a great place for inspiration for sniffing user agens (What the device tells you it is)

answered Apr 23 '19 at 13:25

Sølve Tornøe

3,038
15
27

1

Thanks. I am also thinking about it, but hoped there is another way for prevent. – Sergey Bogdanov Apr 24 '19 at 06:05

Prevent enter action on IOS return click

1 Answers1