Windows Mobile: Enter Key Doesn’t Submit HTML Form (Solution)
Today I was working on a very simple HTML application which was targeting a Windows Mobile 5 device. One of the key elements of the application was a small form which had a few fields the user could fill out and submit.
For example, consider the following code:
which generates this page:
The problem is: If you have more than one input field in a form, Pocket Internet Explorer WILL NOT submit the form when the user presses the enter key in one of the input fields. For example: if the users enters data into “Field 1″ and wants to submit the form, they must tab to the “Submit” button and press enter.
First of all, this isn’t really a new problem. Some browsers have behaved this way for a long time, and the solution is pretty well-known in the industry. All you need to do to solve this problem on most browsers is to add an onkeydown event to all of the fields, check for the enter key (code 13), and submit the form using javascript. However, Pocket Internet Explorer doesn’t support the ONKEYDOWN attribute of an INPUT element. So, now what do you do?
Well, it took me a little while to figure out a solution, but the following works quite well. According to the HTML Reference for Pocket Internet Explorer, the FORM HTML Element does support the ONSUBMIT attribute. So, we can divide the single form up into three forms (one for each input) and sync up the values when the user submits the form. Consider the following HTML:
In this example, the fields are divided up into three forms (one field per form). Each form contains it’s primary field, as well as hidden fields for the other values. All of the forms have the same ACTION attribute, and all of the forms have an ONSUBMIT attirbute which points to the getOtherFields() JavaScript method. In the getOtherFields method, we populate the hidden fields on each form with the actual fields the user sees. After populating the hidden fields, we return true so the form will now be submitted.
This solution presents the same page to the user, but now allows the enter button to be pressed in any of the fields to submit the form.
…
