Textbox"

From Documentation
Line 3: Line 3:
 
= Textbox =
 
= Textbox =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f2 Textbox]
+
*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 =
Line 46: Line 47:
 
</source>
 
</source>
  
=Supported events=
+
=Supported Events=
  
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
Line 52: Line 53:
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
| <center><tt>onChange</tt></center>
+
| None
| <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>
+
| None
 
+
|}
'''Description:'''
 
 
 
Denotes the content of an input component has been modified by the user.
 
 
 
|-
 
| <center><tt>onChanging</tt></center>
 
| <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>
 
 
 
'''Description: '''
 
 
 
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.
 
 
 
|-
 
| <center><tt>onSelection</tt></center>
 
| <javadoc>org.zkoss.zk.ui.event.SelectionEvent</javadoc>
 
 
 
'''Description: '''
 
 
 
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.''' '''
 
 
 
|-
 
| <center><tt>onFocus</tt></center>
 
| <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
 
 
'''Description: '''
 
 
 
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.
 
 
 
|-
 
| <center><tt>onBlur</tt></center>
 
| <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 
 
 
'''Description: '''
 
 
 
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.
 
 
 
|-
 
| <center><tt>onCreate</tt></center>
 
| <javadoc>org.zkoss.ui.zk.ui.event.CreateEvent</javadoc>
 
 
 
'''Description: '''
 
 
 
Denotes a component is created when rendering a ZUML page.
 
 
 
|-
 
| <center><tt>onDrop</tt></center>
 
| <javadoc>org.zkoss.ui.zk.ui.event.DropEvent</javadoc>
 
  
'''Description: '''
+
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/InputElement#Supported_Events | InputElement]]
 
 
Denotes another component is dropped to the component that receives this event.
 
 
 
|}
 
  
 
=Supported Children=
 
=Supported Children=
Line 113: Line 63:
 
  *NONE
 
  *NONE
  
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"

Revision as of 01:54, 17 November 2010

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, will cause a validating preocess to valdate the value. If valdation fail, then a notification will poped 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"/>

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

Version Date Content
     



Last Update : 2010/11/17

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