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:

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:

  1. You can only use such character combination once in the input mask.

  2. You can only use such character combination at the end of the input mask.

Here are some examples of invalid WCSS style rule:

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".)


Previous Page Page 27 of 39 Next Page


Feedback Form (ExpandCollapse)

What do you think about this web page?






(Optional) Please provide us more details. For example, suppose you select option 2 above, can you tell us specifically what information is missing? You can also suggest anything that can help us improve this web page.

(Optional) Your name:

(Optional) Your email address:

Please enter again to confirm:

Due to the amount of messages we received, we may not be able to reply to all messages.