How do I trigger onsubmit() events for simple forms in Opera Mobile with a virtual keyboard?

Question

I have a small application that normally has a single visible text input, and pressing enter triggers a JavaScript method without triggering the normal form submission. Here is a very simple test case:

<form onsubmit="document.write('form submitted!');return false">
    <input type="text">
    <input type="submit" style="display:none">
</form>

On desktop browsers this works as expected - you enter text, press enter, and the script executes.

However, on Opera Mobile focussing on the text input brings up a virtual keyboard; if you enter text and touch "Done", the text is transferred to the input field, but the form is not submitted. There is also no "enter"

I'd like the app to behave the same way across browsers and devices, rather than make the submit button visible only in Opera Mobile.

Answer 1

you have to:

• give an id to your form
• catch the "done" event under opera mobile, which I'm afraid I don't know the name
• get the form with its id and call its submit() method in the done event.

Regarding to the event, I found out some informations:

Opera developers website:

Opera Presto has full support for DOM 2 Events with no exceptions.

http://www.opera.com/docs/specs/presto2.11/dom2/events/

w3c:

6.1.2.4 Virtual Keyboards and Chording Keyboards

Virtual keyboards are software-based sets of keys, in a variety of different arrangements, commonly found on touch-screen devices; they are often modal, with the ability to switch between different dynamic sets of keys, such as alphabetic, numeric, or symbolic keys. Because of the lack of physical constraints, these keyboards may present the widest range of characters, including emoticons and other symbols, and may have keys not represented by Unicode [Unicode] or by the key values set defined in this specification. Wherever possible, however, virtual keyboards should produce the normal range of keyboard events and values, for ease of authoring and compatibility with existing content.

http://www.w3.org/TR/DOM-Level-3-Events/

Basically it doesn't say anything about specific touch events, unlike under webkit technologies. So, you will have to catch the keypress/up/down, parse the keyCode/which attribute, compare to the one of "DONE" (some alerts will give you the good one) and then call the form.submit(); method.

rgds.

Answer 2

There really seems to be no way to catch the "done" key press in Opera Mobile:

• it does not trigger keydown/keypress, so no keycode to catch
• neither blur/focuslost (the focus stays in the field even after hitting "done")
• change/input fire with every key type (so that's way before "done")
• submit event never fires either

Seems to me like the only solution is really to show the "submit" button for "Opera Mobile" browsers.

Answer 3

Add name attr to the text input field and Opera will submit the form as expected (it will show "Go" instead of "Done" on the virtual keyboard).

<input name="whatever" type="text" />