Key event handling in S60 Browser 7.1 and S60 WRT 1.1

Template:KBTS

Article Metadata

---

Tested with

Devices(s): N86, E52, E55, E72, E75, 6710 Navigator, 6720 Classic, 6730 Classic, 5630 XpressMusic, 5730 XpressMusic, 5530 XpressMusic, N97

---

Compatibility

Platform(s): S60 3rd Edition FP2, S60 5th Edition

---

Article

Keywords: Browser, WRT, key events, Web Runtime, key navigation

Created: (30 Jun 2009)

Last edited: Nokia Ron (15 Jul 2009)

Overview

There is a problem with key event triggering logic due to changes in the S60 Browser 7.1. This impacts browser and WRT developers, relying on navigation and selection key events as a part of their application logic.

Description

The S60 Browser has undergone a major update in S60 5th Edition and the latest S60 3rd Edition FP2 devices. An update to the WebKit core introduces changes to how key events are triggered and delegated to the DOM event handlers.

This problem has been addressed in upcoming releases (browser 7.1.15679 onwards) but some devices have already shipped with the browser 7.1 (before browser 7.1.15679). This article shows how to create widgets that will work across browser versions.

• Center (Selection key) now triggers mouse (onClick) events instead of key events (onPress).
• Navigation keys (left/right/up/down) now trigger key (onKeyDown, onKeyUp) events instead of onPress events.

Solution

Developers relying on keypress events as a part of their navigation logic must migrate to monitoring keyDown/keyUp events for left/right/up/down keys and onClick events for the selection key.

Code example - handling left/right/up/down key events

Old code

 document.onkeypress = function(event){
   // add left/right/up/down keypress event handling code here
 }

New code - migrate to this

 document.onkeydown = function(event){
   // add left/right/up/down keydown event handling code here
 }

Additionally, developers relying on key events from the selection key must migrate to monitoring the click event.

Code example - handling selection key events

Replace DOMelement with a reference to the DOM element you are monitoring.

Old code

 DOMelement.onkeypress = function(event){
   // code for handling selection key events
 }

New code - migrate to this

 DOMelement.onclick = function(event){
   // add code for handling selection events
 }