Controlling character type in input fields
Article Metadata
Code Example
Source file: Media:Textinput format.zip
Tested with
Devices(s): Nokia 5800, S60 3rd Edition FP2 devices
Compatibility
Platform(s): S60 5th Edition, S60 3rd Edition FP2
Article
Keywords: WRT widget S60 browser text input
Created: petro.soininen@nokia.com
(24 Oct 2008)
Last edited: hamishwillee
(13 Mar 2012)
Overview
Wireless CSS property -wap-input-format can be used to control the characteristics of text input fields in S60 web browser and WRT widgets.
A good reference for the available formatting values is located here: http://www.developershome.com/wap/wcss/wcss_tutorial.asp?page=inputExtension2
Widget / web page xHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text input</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style tyle=text/css>
input {background-color: #cc0000; font-weight: bold; font-size: 3em; color: white; width:100%;}
</style>
</head>
<body>
<form action="" method="" accept-charset="utf-8">
<p>Lower case letter or symbol:<br>
<input type="text" tabindex=1 style="-wap-input-format: '*a'"/>
</p>
<p>Upper case letter or symbol:<br>
<input type="text" tabindex=2 style="-wap-input-format: '*A'"/>
</p>
<p>Number or symbol:<br>
<input type="text" tabindex=3 style="-wap-input-format: '*n'"/>
</p>
<p>Number:<br>
<input type="text" tabindex=4 style="-wap-input-format: '*N'"/>
</p>
<p>Lower case letter, number or symbol:<br>
<input type="text" tabindex=5 style="-wap-input-format: '*x'"/>
</p>
<p>Upper case letter, number or symbol:<br>
<input type="text" tabindex=6 style="-wap-input-format: '*X'"/>
</p>
<p>Any, initially lowercase character<br>
<input type="text" tabindex=7 style="-wap-input-format: '*m'"/>
</p>
<p>Any, initially uppercase character<br>
<input type="text" tabindex=8 style="-wap-input-format: '*M'"/>
</p>
<p>2 numbers, 2 lowercase and 2 uppercase letters letters<br>
<input type="text" tabindex=9 style="-wap-input-format: 'NNaaAA'"/>
</p>
</form>
</body>
</html>
Test application and other attachments (optional)
Please rename the .zip file to .wgz before attempting to install it on the emulator or a real device.
