Textarea with GO button (submit) on iPhone - javascript

I have a form with a textarea (it's a chat).
Pressing enter submits the form (via javascript/jquery)
It works beautifully on all regular computers with an enter key. But on iPhone, there is no enter key, and the GO (submit) button does not appear, meaning the form can't be sent
No problem if the textarea was instead input type="text" field, but then I miss the multi-line wrapping etc. from a textarea
How do I work around this? I would rather not show a submit button nor make two versions of the form.
And I believe an input field can't behave as a textarea, right? (multiline)

Related

Submit Select2 dropdown without pressing enter

When doing select2 form it submits fine if I press enter but if I press tab to move to the next field and lose my input. I tried using some other select2: events to capture the input but it seems as soon as you lose focus on the field the information is gone. Any way to capture that input on the lose:focus attribute or other event?

iOS : input field does not display text when typed in but cursor still moves

We use iPads in our warehouse and for some reason, some of them have issues with input fields. We have an HTML page which displays some text and has 1 input and a couple of buttons. When we focus on the input field, the keyboard shows up like normal, but when we type in, no text is displayed in the input field even though the cursor still moves as if it recognized that some characters were entered. The weirdest part is, if we zoom out, the text will actually appear.
When the above issue happens, if we submit the form with an "empty" input, it won't record the input's value, even though the cursor believes there were characters entered. If we zoom out and the text appears, then we can submit the form and the input's value is recorded correctly.
This does not happen on an Android device, it seems to be related to iOS only... any solutions?
Thanks!
Check out this question, maybe the same solution would work in this case as well? Input field bug on IOS - text turns white
And this one - can't get writing text in html text box in Webview of iOS

IPhone - Not able to enter text in textarea

We have a form which has a mandatory HTML text-area and a button which posts the form.
When user click the button with empty text-area, we show a popup that the text-area field is required and the popup has a close button on it, when a user clicks close button, we put the focus back on text-area. In this case, the keypad opens up in IPhone but the user is not able to enter anything in the field.
If the user click outside the text-area field and then again clicks on the field, then user is able to enter text in the field.
Same thing works in android device but not working for IPhone.
Can anybody give me a suggestion of what to look for or how to handle this?
We are using the focus() method to set the focus on text-area.

iOS jumps and targets new field when using the autofocus

I have a login page that contains the usual email and password fields, as well as a log in button. For usability, the autofocus HTML5 attribute has been used on the email field.
When loading the page on iOS, you can tell by the green border that the field has the focus, but because of iOS limitations, the focus is not fully applied to the field, as you can see here with the keyboard not being displayed:
The first thing the user does is touches the email field, but as far as iOS is concerned, you're clicking on a different part of the page. The focus is actually given to the password field instead, because the page shifts upwards to make way for the keyboard that did not display previously:
In a similar behaviour, if the user touches on the password after page load, the log in button is clicked instead and validation errors appear.
Is there any way to solve this?
Why not disable the autofocus when you show the page on iOS?
It would be very annoying when user enter a website and the keyboard pops up without any actions on the page.
I even can't think of any website popping up the keyboard on the load.

Is there a way to change what the go / submit button on a mobile keyboard does on a mobile web page?

We have a shopping cart form which has 3 submit buttons (one to update the quantity, one to enter a promo code, and one to finish the checkout).
On desktop the user is expected to click the submit button next to the item they are affecting and this is generally what happens, the button is close to where their mouse/keyboard focus is and the visual association is strong.
On mobile it feels more natural to click the "go" or "submit" button provided by the mobile keyboard. This submits the form using the first submit button on the page rather than the most appropriate one.
Can I change what happens when a mobile user clicks the go/submit button on their keyboard?
My knowledge here is very limited, but can't you use the onsubmit callback? - http://www.htmlgoodies.com/html5/tutorials/HTML5-Development-Form--Keyboard-Events-3885651.htm#fbid=NgeGkg0S2JD
Solved this by disabling the submit buttons and conditionally enabling them based on which form field has the focus (only tested on iPhone so far).
On iPhone anyway the keyboard's go button submits using the first enabled submit button it finds. If there are no enabled buttons the button does nothing (wish it was removed if there is no enabled submit button but this is not the case).

Categories