MatheusrdSantos / vue-quick-chat

A simple chat component created with Vue.js
MIT License
128 stars 45 forks source link

[Bug] IOS - Keyboard "Done/Submit" button #18

Closed martinandersen3d closed 4 years ago

martinandersen3d commented 4 years ago

IOS only. Works fine in Safari, Chrome etc.

I'm not going to use so much time on this one...

Description:

Possible solutions:

- Inspecting the DOM, it looks like there is not used a <input type="text"> and a <input type="submit" value="Submit">. I'm not sure if that will fix it.. 
- Having a <form onsubmit="myFunction()">...</form> around the text field is maybe a solution.. 

Anyway, its a smaller thing, now documented :-)

iOGYK3y4wY

MatheusrdSantos commented 4 years ago

Maybe this problem is happening because I'm using a div with contenteditable="true" as input text. So the keyboard doesn't detect any input field to submit the text.

I'll solve this issue in the next few days. Thanks for reporting this error.

martinandersen3d commented 4 years ago

OK, I did try some different combinations here. Whatever I try it always says "Done". Its a "bug" on apples side, and not something we can change.

Good answer from stackoverflow:

As of iOS 9.3 this is not possible. (Unlike android) iOS is not open source so it's hard to prove but It's likely intentional because there is no other safe way to exit the keyboard. (Unlike android which has a back/close-keyboard button on swipe up or physically depending on the device). https://stackoverflow.com/questions/19939487/ios-keyboard-without-prev-next-done-button-for-html-input-field

That means, that current solution is perfect :D

image

some quick and dirty code: https://codepen.io/martinandersen3d/pen/KKKrLOj

MatheusrdSantos commented 4 years ago

Great! So that is the default IOS behavior.