18.1. Controlling the
Type and Number of Characters to be Entered in Text Fields
(-wap-input-format Property)
The
-wap-input-format WCSS property takes a number of format characters
as its value. The format characters specify the type and number of
characters that can be entered in a text field. The -wap-input-format
WCSS property should be applied to the <input type="text">,
<input type="password"> and <textarea> tags.
There will be no effect if it is applied to other XHTML MP tags. The
property value of -wap-input-format is called the input mask.
The
following table shows the format characters available (format
characters are case-sensitive):
Format
characters
|
Usage
|
a
|
It
is used to represent any lowercase letter or symbolic character.
|
A
|
It
is used to represent any uppercase letter or symbolic character.
|
n
|
It
is used to represent any numeric or symbolic character.
|
N
|
It
is used to represent any numeric character.
|
x
|
It
is used to represent any lowercase letter, numeric or symbolic
character.
|
X
|
It
is used to represent any uppercase letter, numeric or symbolic
character.
|
m
|
It
is used to represent any character. The WAP browser is in
lowercase input mode by default but can be changed to uppercase
input mode.
|
M
|
It
is used to represent any character. The WAP browser is in
uppercase input mode by default but can be changed to lowercase
input mode.
|
Here
are two WAP CSS examples that illustrate the usage of the
-wap-input-format property:
-wap-input-format:
"NN"
Meaning:
You must enter 2 numeric characters in a text field with this WAP CSS
style rule applied.
-wap-input-format:
"AAAAA"
Meaning:
You must enter 5 uppercase letters or symbolic characters in a text
field with this WAP CSS style rule applied.
The
input mask must be enclosed in double quotes or single quotes since
the -wap-input-format property takes a string value. Note that single
quotes do not work in Openwave Mobile Browser 6.2.2. For example, the
following markup does not work properly in Openwave Mobile Browser
6.2.2:
<input
type="text" style="-wap-input-format: 'N'"/>
You
have to change it to the following markup so that the input mask is
enclosed in double quotes:
<input
type="text" style='-wap-input-format: "N"'/>
It
is a good practice to set an input mask for an input field, since the
input mode (alphanumeric mode, numeric mode, etc) of a mobile phone's
keypad will be set automatically according to the input mask. It is a
very convenient feature for the users of your mobile Internet
application. For example, if the input mask is "NN" (it
specifies that the text field can only accept 2 numeric characters),
a mobile phone's keypad will be set to numeric mode automatically. If
you press a key of the mobile phone, no alphabets or symbols can be
outputted.
You
can add a single numeric character before a format character in an
input mask. For example:
-wap-input-format:
"2N"
It
means a user can enter a maximum of 2 numeric characters in a text
field. (Notice that the meaning of "2N" is different from
that of "NN".)
Also,
you can add the * character before a format character in an input
mask. For example:
-wap-input-format:
"*N"
It
means there is no limit in the number of numeric characters that can
be entered.
Another
example is:
-wap-input-format:
"A*a"
It
means the user must:
enter
one uppercase character (or symbolic character), and then
enter
zero or more lowercase character (or symbolic character)
The
input mask "A*a" can be applied to text fields that are
used to obtain a name from the user. It ensures that the first
character must be in uppercase. For example, the user can only enter
"Peter" but not "peter".
The
default value of the -wap-input-format WCSS property is "*M".
The
following two rules should be followed when adding a numeric
character or the * character before a format character:
You
can only use such character combination once in the input mask.
You
can only use such character combination at the end of the input
mask.
Here
are some examples of invalid WCSS style rule:
-wap-input-format:
"9N9N" -- Reason: You can only use 9N once in the input
mask.
-wap-input-format:
"*Naa*N" -- Reason: You can only use *N once in the input
mask.
-wap-input-format:
"9NNNN" -- Reason: You can only use 9N at the end of the
input mask. The correct format should be "NNN9N".
-wap-input-format:
"*NA" -- Reason: You can only use *N at the end of the
input mask.
If
a value of invalid syntax is assigned to the -wap-input-format
property, WAP browsers will ignore the property.
Escaped
characters can be included in an input mask. To escape a character,
you put two backslashes (i.e. \\) in front of that character. (Note:
The Openwave Mobile Browser 6.2.2 does not follow the correct WCSS
language syntax. It uses a single backslash for character escaping.)
Why
do we need escaped characters in the input mask? Look at this
example and you will understand. Let's say you want a user to enter a
date of the form MM/DD/YYYY and you specify "NN\\/NN\\/NNNN"
(or "NN\/NN\/NNNN" for Openwave Mobile Browser 6.2.2) as
the input mask. If the user use Openwave Mobile Browser, the /
character will be inserted automatically at the third and the sixth
character position of the text field as he/she types the date. If the
user use the Nokia Mobile Browser, the / character will not be
inserted automatically but the browser will forbid the user to enter
characters other than / at the third and the sixth character
positions. The input mask in this example ensures that the third and
sixth characters must be /.
(A
note for mobile Internet application developers who are familiar with
WML 1.x:
Character
escaping in the -wap-input-format property value is different from
that in the format attribute value of WML 1.x. Two backslashes are
used to escape a character in the -wap-input-format property value
while a single backslash is used for the same purpose in the format
attribute value. For example, the following XHTML MP markup:
<input
type="text" style='-wap-input-format: "\\bN"'/>
is
equivalent to the following WML 1.x markup:
<input
type="text" format="\bN"/>
You
have to use two backslashes in WCSS because a backslash is a special
character in the WCSS language. To let a backslash character to be
part of a property value, it has to be escaped by another backslash.
This means if you specify -wap-input-format: "\\bN" in the
cascading style sheet, the WCSS processor will treat it as
-wap-input-format: "\bN".)
Feedback Form ( ExpandCollapse)
|