Opera Mobile LogoThis week I was presented with an interesting problem relating to the usability of forms in Opera Mobile. Pressing the enter key while focussed on a form field is generally expected to submit the form. Instead, the enter key in Opera 10 on Windows Mobile 6.5 toggles focus of the field. This behavior can also be replicated in the 11.5 emulator.

My initial reaction was that there had to be a bug or a problem with the markup. The code was not pretty, littered with thousands of lines of embedded JavaScript and styles between mixed variations of HTML. Trying to clean up the form and the code around it had no effect on the issue. I did some around the web and found very little information and no answers to solve the issue.

Some browsers, like Opera Mobile, use server-side rendering technologies which speed up data transfers and reduces processing load on the client device. The rendered data is sent back to the browser in smaller, more manageable static chunks. For input, there is a layer that sits on top of the actual browser and allows for data to be passed into a field. It appears doesn’t properly pass back all events or all key strokes to the control. In this case, the enter key press did not fire any expected DOM events.

My solution replaced input text fields with skinned textarea elements. This allowed for the enter key to be detected using JavaScript and the user doesn’t really know the difference.

The Markup (HTML):

Traditionally, the enter key would be used to generate a line break in a textarea element. Using the onkeypress event, the key press is monitored for the enter key. The onblur and onfocus events are used to toggle the default text label that exists in the field.

The Code (JavaScript):

The following is the JavaScript code that fires upon the blur, focus and keypress events. I ran into an issue with detecting new lines in Opera Mobile. Most support “n” as a special character that detects all forms of a new line including line feeds, carriage returns, etc… However Opera didn’t seem to recognize this in all cases and required that I also check against “r”.

The blur and focus function, checkValue toggles the default label text and strips out new lines, returns and tabs. The testFind function detects key strokes and when the enter key is pressed (code 13) we blur the focus of the field and submit the form. Blurring the field pushes the value back to the element before the form is posted. Occasionally, there would be a delay in showing the value in removing focus to the editable field and the displayed value. By explicitly setting the element to this value, this seemed to speed up the display.

In most browsers, this code should prevent the new line from ever being added to the field. However, in Opera Mobile, this did not work as expected. Hitting enter, sent the new line to the input field anyways, so that is why I am constantly stripping out those invisible characters.

The Styles (CSS):

We can’t have a textarea that looks like a textarea when it acts like an input field! Using styles we remove the scroll bars and style the box to look like a standard input text box.