How to format an input textbox in xHTML

Après avoir longtemps galéré pour trouver la solution à ce souci, j’ai décidé de vous décrire le résultat de mes recherches. Attention! Il y aura toujours des téléphones récalcitrants qui ne marcheront pas avec le code ci-dessous.
 

Controlling the Type and Number of Characters to be Entered in Text Fields (-wap-input-format Property)

 

– Thomas Delerm – 20051026

 

 

 

 

 

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.

 

 

 


 

It is an extension for XHTML Mobile Profile that does just this. Obviously this comes in handy most when you are using a alpha/numeric key pad but some of the functions would help web developers cut down on their JavaScript and add better usability.


 

 


 

It’s used as follows in CSS :


 

input {-wap-input-format: « attribute »}


 

and for a tag (the single + double quotes is to be compatible with openwave browsers):


 

<input type= »text » style=’-wap-input-format: « N »‘/>


 

 


 

And the attributes available are (case-sensitive, crossed with available characters) :


 

 


 

 


 

a


 

A


 

n


 

N


 

x


 

X


 

m


 

M


 

Uppercase


 

 


 

X


 

 


 

 


 

 


 

X


 

Possible


 

X


 

Lowercase


 

X


 

 


 

 


 

 


 

X


 

 


 

X


 

Possible


 

Symbol


 

X


 

X


 

X


 

 


 

X


 

X


 

X


 

X


 

Numeric


 

 


 

 


 

X


 

X


 

X


 

X


 

X


 

X


 

Possible means that it's not the default choice but it can be changed to this setting


 

 


 

Examples:


 

 


 

Date formats

input {-wap-input-format: « NN-NN-NNNN »}


 

 


 

Limit numbers


 

input {-wap-input-format: « 5N »}


 

 


 

Or any unlimited numbers


 

input {-wap-input-format: « *N »}


 

 


 

 


 

Reference with all the details


 

http://www.developershome.com/wap/wcss/wcss_tutorial.asp?page=inputExtension2

 

 

 


 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *