Textbox"

From Documentation
m
 
(32 intermediate revisions by 10 users not shown)
Line 3: Line 3:
 
= Textbox =
 
= Textbox =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f2 Various Form]
+
*Demonstration: [http://www.zkoss.org/zkdemo/input/form_sample Textbox]
 
*Java API: <javadoc>org.zkoss.zul.Textbox</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Textbox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.inp.Textbox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.inp.Textbox</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Textbox | Textbox]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
A <tt>textbox</tt> is used to let users input text 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 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 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 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 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 =
 
= Example =
Line 20: Line 20:
  
  
[[Image:textbox.png]]
+
[[Image:ZKCompRef_Textbox.png]]
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 28: Line 28:
 
<textbox rows="5" cols="40">
 
<textbox rows="5" cols="40">
 
<attribute name="value">
 
<attribute name="value">
text line1...  
+
text line1...  
text line2...
+
text line2...
 
</attribute>
 
</attribute>
 
</textbox>
 
</textbox>
 
</source>
 
</source>
  
 +
To specify multilines value, you can use the attribute element or <code>&amp;#x0d;</code> as shown below
  
=Supported events=
+
<source lang="xml" >
 +
<textbox rows="5" cols="40">
 +
<attribute name="value">
 +
text line1...
 +
text line2...
 +
</attribute>
 +
</textbox>
 +
<textbox value="Line 1&#x0d;Line 2" rows="3"/>
 +
</source>
  
{| border="1" | width="100%"
+
=Properties=
! <center>Name</center>
+
==Tabbable==
! <center>Event Type</center>
+
By specifying a true, the tabbox can insert a long space or format the content inside textbox conveniently.
|-
+
For example,
| <center><tt>onChange</tt></center>
 
| [#InputEvent org.zkoss.zk.ui.event.InputEvent]
 
  
'''Description:'''
+
[[Image:ZKComRef_Textbox_Tabbable.png]]
 +
<source lang="xml">
 +
<textbox tabbable="true"/>
 +
</source>
 +
== SubmitByEnter ==
 +
{{versionSince| 8.5.2}}
  
Denotes the content of an input component has been modified by the user.
+
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.
| <center><tt>onChanging</tt></center>
 
| [#InputEvent org.zkoss.zk.ui.event.InputEvent]
 
  
'''Description: '''
+
The default is '''false'''.
  
Denotes that user is changing the content of an input component. Notice that the component's content (at the server) won't be changed until <tt>onChange</tt> is received. Thus, you have to invoke the <tt>getValue </tt>method in the <tt>InputEvent </tt>class to retrieve the temporary value.
+
<source lang="xml">
 +
<textbox submitByEnter="true" onOK=""/>
 +
</source>
  
|-
+
== Type ==
| <center><tt>onSelection</tt></center>
+
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.
| [#SelectionEvent org.zkoss.zk.ui.event.SelectionEvent]
 
  
'''Description: '''
+
<source lang="xml" >
 +
Username: <textbox/>
 +
Password: <textbox type="password"/>
 +
</source>
  
Denotes that user is selecting a portion of the text of an input component. You can retrieve the start and end position of the selected text by use of the <tt>getStart</tt> and <tt>getEnd</tt> methods.''' '''
+
{{versionSince| 6.5.0}}
 +
The <code>type</code> attribute support HTML 5 defined types <code>tel</code>, <code>email</code> and <code>url</code>.
  
|-
+
<source lang="xml" >
| <center><tt>onFocus</tt></center>
+
Phone: <textbox type="tel"/>
| [#Event org.zkoss.zk.ui.event.Event]
+
Email: <textbox type="email"/>
 +
WebSite: <textbox type="url"/>
 +
</source>
  
'''Description: '''
+
== Constraint ==
 +
Please refert to [[ZK Component Reference/Base Components/InputElement#Constraint]].
  
Denotes when a component gets the focus. Remember event listeners execute at the server, so the focus at the client might be changed when the event listener for <tt>onFocus</tt> got executed.
+
=Inherited Functions=
  
|-
+
Please refer to [[ZK_Component_Reference/Base_Components/InputElement | InputElement]] for inherited functions, such as in-place edition.
| <center><tt>onBlur</tt></center>
 
| [#Event org.zkoss.zk.ui.event.Event]
 
  
'''Description: '''
+
=Supported Events=
 
 
Denotes when a component loses the focus. Remember event listeners execute at the server, so the focus at the client might be changed when the event listener for <tt>onBlur </tt>got executed.
 
  
 +
{| class='wikitable' | width="100%"
 +
! <center>Name</center>
 +
! <center>Event Type</center>
 
|-
 
|-
| <center><tt>onCreate</tt></center>
+
| None
| [#CreateEvent org.zkoss.ui.zk.ui.event.CreateEvent]
+
| None
 
+
|}
'''Description: '''
 
  
Denotes a component is created when rendering a ZUML page.
+
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/InputElement#Supported_Events | InputElement]]
 
 
|-
 
| <center><tt>onDrop</tt></center>
 
| [#DropEvent org.zkoss.ui.zk.ui.event.DropEvent]
 
 
 
'''Description: '''
 
 
 
Denotes another component is dropped to the component that receives this event.
 
 
 
|}
 
  
 
=Supported Children=
 
=Supported Children=
Line 102: Line 108:
 
  *NONE
 
  *NONE
  
=Use cases=
+
=Browser Limitations=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
! Version !! Description !! Example Location
+
! Browser !! description
 
|-
 
|-
| 5.0+
+
| IE
| &nbsp;
+
|
| &nbsp;
+
<source lang="xml"><textbox value="color" style="color:red !important;" disabled="true"/></source>
 +
There is no way to change the text color in a disabled input in IE.
 
|}
 
|}
  
=Version History=
 
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
|-
 
| 5.0.1
 
| 05/11/2010
 
| Initialization
 
|}
 
  
 
{{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.