Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 14:56, 1 June 2013 by pavan.pareta (Talk | contribs)

Interactive buttons with onfocus event

From Wiki
Jump to: navigation, search

This article explains how to highlight buttons when they are pressed. It uses onfocs and onblur events.

Article Metadata
Tested with
SDK: Web Developer Toolkit 3.0 Beta
Devices(s): Nokia Asha 311, Nokia Asha 303
Platform(s): Series40 Touch&Type, Series40 FullTouch
Series 40
Series 40 DP 2.0
Series 40 DP 1.1
Created: internetlabor (31 May 2013)
Last edited: pavan.pareta (01 Jun 2013)



We want to instant feedback when the user presses a button. This makes our web app feels more responsive.


In normal web pages, we can use css-pseudo-classes ":hover" or ":active". But the css-pseudo-classes are not working in the current web app broswer.


We let the button-element handle the focus and blur events.


Because we want instant feedback without a server roundtrip, we can use only the mwl-functions. We can use the mwl.switchclass() function to give the button a different css class. In the css class we can define a different background-color or a different backgroud-image.

<button id ="btnN" class="ui-button unpressed" name="buttonN" 
onfocus="mwl.switchClass('#btnN', 'unpressed', 'pressed');"
onblur="mwl.switchClass('#btnN', 'pressed', 'unpressed');"
onclick="doMyAction();">A Button-Element #btn2</button>

In the css file we need to define pressed and unpressed style in addition to the normal button style:

.unpressed {
background-image: url(../images/button_background.png);
background-repeat: repeat;
background-position: left top;
.pressed {
background-image: url(../images/buttonpr_background.png);
background-repeat: repeat;
background-position: left top;
.ui-button {
height: 35px;
padding-right: 8px;
padding-left: 8px;
color: #FFF;
text-decoration: none;
margin: 5px;


This works differently in emulators and on devices. On a FullTouch and Touch&Type device, it works with button, a , img and div elements. In the cloud preview, it does work only with “button” and “a” elements. Events aon div or img tags are ignored by the simulator.

Furthermore, the blur event occurs at different times in the emulator and on the device. On the fulltouch-and touch&type device, the onblur event is happen when the user releases the finger. On the emulator, the onblur event is happen only after the user clicked another element.

89 page views in the last 30 days.