Textbox"

From Documentation
 
(11 intermediate revisions by 3 users not shown)
Line 10: Line 10:
 
= Employment/Purpose =
 
= Employment/Purpose =
  
A <tt>textbox</tt> is used to let users input textual data.
+
A <code>textbox</code> is used to let users input textual data.
  
You colud assign <tt>value, type, constraint, rows, cols</tt> to a textbox using the corresponding properties. When you assign 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 larger than 1 or set <tt>multiline</tt> to <tt>true</tt> directly) then any character in this component will replace by '*'.
+
You could assign <code>value, type, constraint, rows, cols</code> to a textbox using the corresponding properties. When you assign the property <code>type</code> to a string value "password" when <code>multiline</code> is false (<code>multiline</code> will be <code>true</code> if you set rows larger than 1 or set <code>multiline</code> to <code>true</code> directly) then any character in this component will replace by '*'.
  
 
You could 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 process to validate the value. If the validation fails, then a notification will pop up.
 
You could 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 process to validate the value. If the validation fails, then a notification will pop up.
Line 56: Line 56:
 
</source>
 
</source>
 
== SubmitByEnter ==
 
== SubmitByEnter ==
 +
{{versionSince| 8.5.2}}
  
When submitByEnter="true", press Enter will fire onOK event rather then move to next line, if you want to move to next line, you can press Shift + Enter.
+
When you specify '''true''', pressing Enter will fire onOK event rather then move to next line, if you want to move to next line, you should press '''Shift + Enter'''.
  
 
When submitByEnter="false", press Enter will move to next line.
 
When submitByEnter="false", press Enter will move to next line.
  
Default is true.
+
The default is '''false'''.
  
 
<source lang="xml">
 
<source lang="xml">
 
<textbox submitByEnter="true" onOK=""/>
 
<textbox submitByEnter="true" onOK=""/>
 
</source>
 
</source>
 
since 8.5.2
 
  
 
== Type ==
 
== Type ==
The <tt>type</tt> attribute can be used with the <tt>textbox</tt> based components and can be given the value <tt>password</tt>. By setting the type as password the text that is entered into the box cannot be viewed and is replaced by stars.
+
The <code>type</code> attribute can be used with the <code>textbox</code> based components and can be given the value <code>password</code>. By setting the type as password the text that is entered into the box cannot be viewed and is replaced by stars.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 77: Line 76:
 
</source>
 
</source>
  
  since 6.5.0
+
  {{versionSince| 6.5.0}}
The <tt>type</tt> attribute support HTML 5 defined types <tt>tel</tt>, <tt>email</tt> and <tt>url</tt>.
+
The <code>type</code> attribute support HTML 5 defined types <code>tel</code>, <code>email</code> and <code>url</code>.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 87: Line 86:
  
 
== Constraint ==
 
== Constraint ==
You could specify what value to accept for input controls by use of the <tt>constraint </tt>property.
+
Please refert to [[ZK Component Reference/Base Components/InputElement#Constraint]].
It could be a combination of <tt>no empty</tt>, and/or a regular expression.
 
 
 
To specify two or more constraints, use comma to separate them as follows.
 
 
 
<source lang="xml" >
 
<textbox constraint="no empty,/.+@.+\.[a-z]+/"/>
 
</source>
 
 
 
To specify a regular expression, you may have to use the character <tt>/</tt> to enclose the regular expression as follows.
 
 
 
<source lang="xml" >
 
<textbox constraint="/.+@.+\.[a-z]+/"/>
 
</source>
 
 
 
Notes:
 
 
 
* The above statement is XML, so do ''not'' use <tt>\\</tt> to specify a backslash. However typing <tt>\\</tt> is necessary, if writing in Java.
 
 
 
<source lang="java" >
 
new Textbox().setConstraint("/.+@.+\\.[a-z]+/");
 
</source>
 
 
 
* 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.
 
 
 
<source lang="xml" >
 
<textbox constraint="/.+@.+\.[a-z]+/: e-mail address only"/>
 
</source>
 
 
 
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.
 
 
 
<source lang="xml" >
 
<textbox constraint="/.+@.+\.[a-z]+/: ${c:l('err.email.required')}"/>
 
</source>
 
  
 
=Inherited Functions=
 
=Inherited Functions=
Line 133: Line 94:
 
=Supported Events=
 
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 146: Line 107:
  
 
  *NONE
 
  *NONE
 
=Use Cases=
 
 
{| border='1px' | width="100%"
 
! Version !! Description !! Example Location
 
|-
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
|}
 
 
  
 
=Browser Limitations=
 
=Browser Limitations=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Browser !! description
 
! Browser !! description
 
|-
 
|-
Line 169: Line 119:
 
|}
 
|}
  
=Version History=
 
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
|-
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
|}
 
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 08:07, 25 March 2024

Textbox

Employment/Purpose

A textbox is used to let users input textual data.

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

You could 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 process to validate the value. If the validation fails, 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"/>

SubmitByEnter

Since 8.5.2

When you specify true, pressing Enter will fire onOK event rather then move to next line, if you want to move to next line, you should press Shift + Enter.

When submitByEnter="false", press Enter will move to next line.

The default is false.

<textbox submitByEnter="true" onOK=""/>

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"/>
Since  6.5.0

The type attribute support HTML 5 defined types tel, email and url.

Phone: <textbox type="tel"/>
Email: <textbox type="email"/>
WebSite: <textbox type="url"/>

Constraint

Please refert to ZK Component Reference/Base Components/InputElement#Constraint.

Inherited Functions

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

Supported Events

Name
Event Type
None None

Supported Children

*NONE

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.



Last Update : 2024/03/25

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