How to interpret key events in WRT widgets?
Article Metadata
Compatibility
Platform(s): S60 3rd Edition FP2
Article
Created: forum-mrkt
(03 Oct 2007)
Last edited: hamishwillee
(16 Dec 2011)
Contents |
Browser engine differences
In general, different browser engines differ in key event codes visible to JavaScript level. S60 WRT widget text and input field components do not support all key events found in the other browser or widget environments.
S60 WRT specific APIs
S60 WRT API
widget.setNavigationEnabled(false);
disables navigation mode and allows your JavaScript code to collect also cursor key events.
Example
Following simple example let's you explore different key event values provided by S60 WRT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
/*
* attach key listeners
*/
document.onkeypress = keyPress;
document.onkeyup = keyUp;
document.onkeydown = keyDown;
/*
* disable cursor navigation - otherwise cursor
* key events are not received by keypress callbacks
*/
widget.setNavigationEnabled(false);
/*
* show keyCode and charCode.
*/
function keyPress(event) {
document.getElementById('keypressField').innerHTML = event.keyCode + " / " +
event.charCode;
}
function keyDown(event) {
document.getElementById('keydownField').innerHTML = event.keyCode + " / " +
event.charCode;
}
function keyUp(event) {
document.getElementById('keyupField').innerHTML = event.keyCode + " / " +
event.charCode;
}
</script>
</head>
<body>
keyCode / charCode:
<div>
KeyPress:
<div id="keypressField"></div>
</div>
<div>
Keydown:
<div id="keydownField"></div>
</div>
<div>
Keyup:
<div id="keyupField"></div>
</div>
</body>
</html>
Key and Char code table
For your reference here is collected values from test application. Format is like in example, event.keyCode / event.charCode.
| key | keyPress | keyDown | Keyup |
| 0 | 48/48 | 48/48 | 48/48 |
| 1 | 49/49 | 49/49 | 49/49 |
| 2 | 50/50 | 50/50 | 50/50 |
| 3 | 51/51 | 51/51 | 51/51 |
| 4 | 52/52 | 52/52 | 52/52 |
| 5 | 53/53 | 53/53 | 53/53 |
| 6 | 54/54 | 54/54 | 54/54 |
| 7 | 55/55 | 55/55 | 55/55 |
| 8 | 56/56 | 56/56 | 56/56 |
| 9 | 57/57 | 57/57 | 57/57 |
| */+ | 56/42 | 42/42 | 56/42 |
| # | 51/35 | 35/35 | 51/35 |
| C | 8/8 | 8/8 | 8/8 |
| green | 0/63586 | 63586/63586 | 0/63586 |
| center | 0/63557 | 63557/63557 | [n/a]/[n/a] |
| left | 37/63495 | 63495/63495 | [n/a]/[n/a] |
| up | 38/63497 | 63497/63497 | [n/a]/[n/a] |
| right | 39/63496 | 63496/63496 | [n/a]/[n/a] |
| down | 40/63498 | 63498/63498 | [n/a]/[n/a] |
