Textbox"

From Documentation
Line 14: Line 14:
 
You colud assign <tt>value, type, constraint, rows, cols </tt>to a textbox by the corresponding properties. When you assigns the property <tt>type </tt>to a string value 「password」 when <tt>multiline </tt>is false( <tt>multiline</tt> will be <tt>true </tt>if You set rows large then 1 or sets <tt>multiline </tt>to true directly) then any character in this component will replace by '*'.
 
You colud assign <tt>value, type, constraint, rows, cols </tt>to a textbox by the corresponding properties. When you assigns the property <tt>type </tt>to a string value 「password」 when <tt>multiline </tt>is false( <tt>multiline</tt> will be <tt>true </tt>if You set rows large then 1 or sets <tt>multiline </tt>to true directly) then any character in this component will replace by '*'.
  
You colud also assign a constraint value with a regular expression string or a default constraint expression(available value is 「no empty」). When user change the value of textbox, will cause a validating preocess to valdate the value. If valdation fail, then a notification will poped up.  
+
You colud also assign a constraint value with a regular expression string or a default constraint expression(available value is 「no empty」). When user change the value of textbox, it will cause a validating preocess to valdate the value. If the validation fail, then a notification will pop up.
 
 
  
 
= Example =
 
= Example =

Revision as of 09:06, 29 July 2011

Textbox

Employment/Purpose

A textbox is used to let users input text data.

You colud assign value, type, constraint, rows, cols to a textbox by the corresponding properties. When you assigns the property type to a string value 「password」 when multiline is false( multiline will be true if You set rows large then 1 or sets multiline to true directly) then any character in this component will replace by '*'.

You colud also assign a constraint value with a regular expression string or a default constraint expression(available value is 「no empty」). When user change the value of textbox, it will cause a validating preocess to valdate the value. If the validation fail, then a notification will pop up.

Example

ZKCompRef Textbox.png

<textbox value="text..." />
<textbox value="secret" type="password" />
<textbox constraint="/.+@.+\.[a-z]+/: Please enter an e-mail address" />
<textbox rows="5" cols="40">
	<attribute name="value">
text line1... 
text line2...
	</attribute>
</textbox>

To specify multilines value, you can use the attribute element or &#x0d; as shown below

<textbox rows="5" cols="40">
	<attribute name="value">
text line1... 
text line2...
	</attribute>
</textbox>
<textbox value="Line 1&#x0d;Line 2" rows="3"/>

Properties

Tabbable

By specifying a true, the tabbox can insert a long space or format the content inside textbox conveniently. For example,

ZKComRef Textbox Tabbable.png

<textbox tabbable="true"/>

Type

The type attribute can be used with the textbox based components and can be given the value password. By setting the type as password the text that is entered into the box cannot be viewed and is replaced by stars.

Username: <textbox/>
Password: <textbox type="password"/>

Constraint

You could specify what value to accept for input controls by use of the constraint property. It could be a combination of no empty, and/or a regular expression.

To specify two or more constraints, use comma to separate them as follows.

<textbox constraint="no empty,/.+@.+\.[a-z]+/"/>

To specify a regular expression, you may have to use the character / to enclose the regular expression as follows.

<textbox constraint="/.+@.+\.[a-z]+/"/>

Notes:

  • The above statement is XML, so do not use \\ to specify a backslash. However typing \\ is necessary, if writing in Java.
new Textbox().setConstraint("/.+@.+\\.[a-z]+/");
  • You are allowed to mix regular expressions with other constraints by separating them with a comma.

If you prefer to display different message to the default one, you can append the error message to the constraint with a colon.

<textbox constraint="/.+@.+\.[a-z]+/: e-mail address only"/>

Notes:

  • The error message, if specified, must be the last element and start with colon.
  • To support multiple languages, you could use the 「l」 function as depicted in the Internationalization chapter.
<textbox constraint="/.+@.+\.[a-z]+/: ${c:l('err.email.required')}"/>

Inherited Functions

Please refer to InputElement for inherited functions, such as in-place edition.

Supported Events

Name
Event Type
None None

Supported Children

*NONE

Use Cases

Version Description Example Location
     


Browser Limitations

Browser description
IE
<textbox value="color" style="color:red !important;" disabled="true"/>

There is no way to change the text color in a disabled input in IE.

Version History

Last Update : 2011/07/29


Version Date Content
     



Last Update : 2011/07/29

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.