The TEXTAREA
element lets users enter more than one line of text.
Any text included up to the end element is used to initialise the field's value. This end element is always required even if the field is initially blank. When submitting a form, lines in a TEXTAREA
should be terminated using CR/LF.
In a typical rendering, the ROWS and COLS attributes determine the visible dimension of the field in characters. The field is rendered in a fixed-width font. HTML user agents should allow text to extend beyond these limits by scrolling as needed.
The WRAP attribute can be used to specify how to handle word-wrapping display in text input areas in forms.
<TEXTAREA WRAP=OFF>
-- the default setting - Wrapping doesn't happen. Lines are sent exactly as typed.
<TEXTAREA WRAP=VIRTUAL>
-- The display word-wraps, but long lines are sent as one line without new-lines.
<TEXTAREA WRAP=PHYSICAL>
-- The display word-wraps, and the text is transmitted at all wrap points.
NOTE : Internet Explorer (version 3.0), by default wraps text in a <TEXTAREA>
box, while Internet Explorer 4.0 supports the WRAP
attribute. Also, these values have changed in Netscape 4.0 and Internet Explorer 4.0 and above to WRAP="off|soft|hard"
respectively.
the <TEXTAREA>
can also take the NAME attribute, which can be used to set the name of the element for scripting purposes.
ACCESSKEY
The ACCESSKEY
attribute can be used to specify a shortcut key for the <TEXTAREA>
(activated by pressing 'Alt' and the ACCESSKEY
together - like standard Windows applications menu shortcuts). The ACCESSKEY
setting can be any valid key character and the <TEXTAREA>
is not modified in any way to reflect that an ACCESSKEY
has been defined.
TABINDEX
The TABINDEX
attribute can be used to set a tabbing order for the user to navigate around the main <FORM>
. For example, if <FORM>
elements have TABINDEX
properties set, when the user is focused on an element, pressing the 'Tab' key will pass the focus to the element with the next highest TABINDEX
property.
TITLE="informational ToolTip"
The Internet Explorer 4.0 (and above) specific TITLE
attribute is used for informational purposes. If present, the value of the TITLE
attribute is presented as a ToolTip when the users mouse hovers over the <TEXTAREA>
section.
LANG="language setting"
The LANG
attribute can be used to specify what language the <TEXTAREA>
element is using. It accepts any valid ISO standard language abbreviation (for example "en"
for English, "de"
for German etc.) For more details, see the Document Localisation section for more details.
LANGUAGE="Scripting language"
The LANGUAGE
attribute can be used to expressly specify which scripting language Internet Explorer 4.0 uses to interpret any scripting information used in the <TEXTAREA>
element. It can accept values of vbscript
, vbs
, javascript
or jscript
. The first two specify the scripting language as Visual Basic Script, the latter two specify it as using Javascript (the default scripting language used if no LANGUAGE
attribute is set.
CLASS="Style Sheet class name"
The CLASS
attribute is used to specify the <TEXTAREA>
element as using a particular style sheet class. See the Style Sheets topic for details.
STYLE="In line style setting"
As well as using previously defined style sheet settings, the <TEXTAREA>
element can have in-line stylings attached to it. See the Style Sheets topic for details.
ID="Unique element identifier"
The ID
attribute can be used to either reference a unique style sheet identifier, or to provide a unique name for the <TEXTAREA>
element for scripting purposes. Any <TEXTAREA>
element with an ID
attribute can be directly manipulated in script by referencing its ID
attribute, rather than working through the All collection to determine the element. See the Scripting introduction topic for more information.
ALIGN="Alignment"
The ALIGN
attribute can be used to set the alignment for the drop-down list. It accepts the standard ALIGN
attribute values of absbottom
, absmiddle
, baseline
, bottom
, left
, middle
, right
, texttop
and top
.
DATAFLD="Column Name"
The DATAFLD
attribute can be used to specify a data column name from the Data source (see DATASRC
) that the <TEXTAREA>
is bound to. For more information on the DATAFLD
attribute, see the Data Binding topic.
DATASRC="Data Source"
The DATASRC
attribute can be used to specify a data source that the <TEXTAREA>
is bound to. For more information on the DATASRC
attribute, see the Data Binding topic.
DISABLED
Setting the DISABLED
flag for a <TEXTAREA>
box disables it from receiving any user input, or focus. It can still display values, text etc., but the user will not be able to make any changes to those values.
READONLY
The READONLY
flag is slightly different to the DISABLED
flag in that an <TEXTAREA>
element labelled as READONLY
can still receive the users focus, but the contents of the control can not be changed.
Every <TEXTAREA>
element in a document is an object that can be manipulated through scripting. Scripting of the <INPUT>
element is supported by both browsers (Netscape supports scripting through the Forms collection/array and Elements Object/Array. See those topics for details of Netscape support for scripting the <INPUT>
element.)
<TEXTAREA...>
Properties
The <TEXTAREA...>
element/object supports all of the standard Dynamic HTML properties (i.e. className, document, id, innerHTML, innerText, isTextEdit, lang, language, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerHTML, outerText, parentElement, parentTextEdit, sourceIndex, style, tagName and title). Details of these can be found in the standard Dynamic HTML properties topics.
The <TEXTAREA>
element also supports the following properties:
accessKey
The accessKey
property directly reflects the value of the ACCESSKEY
attribute (see above).
align
The align
property directly reflects the value of the ALIGN
attribute (see above).
clientHeight
The clientHeight
property reflects the height (in pixels) of the contents of the <TEXTAREA>
element.
clientWidth
The clientWidth
property reflects the width (in pixels) of the contents of the <TEXTAREA>
element.
cols
The cols
property directly reflects the value of the COLS
attribute, if set. (See above)
dataFld
The dataFld
property directly reflects the value of the DATAFLD
attribute, setting the column name for Data Binding of the <TEXTAREA>
element.
dataSrc
The dataSrc
property directly reflects the value of the DATASRC
attribute, taking the ID
attribute of the data source for Data Binding of the <TEXTAREA>
element.
disabled
The disabled
contains a boolean value representing whether the DISABLED
flag has been set for the <TEXTAREA>
element.
name
The name
property directly reflects the value of the NAME
attribute for the <TEXTAREA>
text box.
readOnly
The readOnly
contains a boolean value representing whether the READONLY
flag has been set for the <TEXTAREA>
element.
rows
The rows
property directly reflects the value of the ROWS
attribute for the <TEXTAREA>
text box.
scrollHeight
The scrollHeight
property reflects the contents of the <TEXTAREA>
elements total scrollable height (in pixels).
scrollLeft
The scrollLeft
property reflects a value representing the distance between the left-most edge of the element and the left-most visible edge of the element. While the contents of the <TEXTAREA>
element are totally visible on the screen, the scrollLeft
property is 0, only increasing if the left-most edge of the <TEXTAREA>
elements contents are scrolled off the left hand edge of the current viewing window.
scrollTop
The scrollTop
property returns a value that represents the distance between the top-most edge of the element and the top-most edge of the current viewing window. When used with the <TEXTAREA>
element, the scrollTop
property is a value indicative of the extent to which the referenced element has been scrolled vertically. If the contents of the <TEXTAREA>
element are visible, then the scrollTop
property will be 0, only increasing as the contents of the element are scrolled off the top of the current viewing window.
scrollWidth
Like the scrollHeight
property, the scrollWidth
property reflects a value that represents the total scrollable width of the contents of the <TEXTAREA>
element.
tabIndex
The tabIndex
property reflects (or sets) the value of the TABINDEX
attribute, when used in <TEXTAREA>
elements.
type
The type
property returns 'textarea' for the <TEXTAREA>
element. It represents a string value giving a description of the type of form element being referenced.
value
The value
property reflects (or sets), the VALUE
attribute for the <TEXTAREA>
element.
wrap
The wrap
property directly reflects any settings of the WRAP
attribute (see above).
<TEXTAREA...>
Methods
The <TEXTAREA...>
element/object supports all of the standard Dynamic HTML methods (i.e. click, contains, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView and setAttribute). Details of these can be found in the standard Dynamic HTML Methods topics.
Additionally, the <TEXTAREA>
element supports the following methods:
blur
The blur
event can be used to force the users focus away from the referenced <TEXTAREA>
element, firing the onblur
event.
createTextRange
The createTextRange
method can be invoked to create a TextRange object from the contents of the <TEXTAREA>
element. See the TextRange object topic for details of properties, methods and events applicable to text ranges.
focus
The focus
method can be used to pass the users focus to the referenced <TEXTAREA>
element, forcing the onfocus
event to fire.
<TEXTAREA...>
Events
The <TEXTAREA...>
element/object supports all of the standard Dynamic HTML events (i.e. onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup and onselectstart). Details of these can be found in the standard Dynamic HTML events topics.
The following events are also supported by the <TEXTAREA>
element:
onafterupdate
The onafterupdate
event is fired after data is transferred from the element to the data provider and will only fire after the onbeforeupdate
event has fired and was successful. For more information on Data Binding, see the Data Binding topic.
onbeforeupdate
onbeforeupdate
fires when a data bound element loses the focus, or the current document is unloaded and will only fire if the value of the element is different to the original value that was present when the element received the users focus. Note that onbeforeupdate
is a cancelable event (setting returnValue=false
for the Event object), which allows the document /script author a chance to validate the new data entered by the user on the client-side, before sending the data to the data provider. For more information on Data Binding, see the Data Binding topic.
onblur
When the referenced <TEXTAREA>
element loses the users focus, the onblur
event is fired. On the fly form validation can make use of the onblur
event to check form elements as the user is entering information.
onchange
The onchange
event is fired when the user commits changes to an <TEXTAREA>
element. The event does not fire when the actual changes are made, but when the user 'commits' them, by either submitting the form, or by 'blurring' (i.e. removing focus from) the element. Any code using the onchange
event is executed before the onblur
event (see above), if the change is committed by the user removing the focus.
onerrorupdate
The onerrorupdate
event fires when a data transfer error occurs, through some action by the user (i.e. pressing the 'Stop' button on the browser for example), but not if a script generates the transfer error. For more information on Data Binding, see the Data Binding topic.
onfocus
When the user passes the focus to any <TEXTAREA>
element, the onfocus
event is fired for that element.
onrowenter
The onrowenter
event fires on the data source control when the current record has been changed, so new data is available to populate the HTML display elements that are bound to the data source. Somewhat confusingly, this will typically happen after the onrowexit
event has been fired. For more information on Data Binding, see the Data Binding topic.
onrowexit
The onrowexit
event is fired immediately before the data source changes the current record (i.e. when the user has requested another record, or set of records by pressing a button perhaps). Note that unlike the onafterupdate
and onbeforeupdate
events, onrowexit
is fired by the data source, not any of the HTML elements used to display the data. Changes to the data in the HTML elements should have been transferred to the data source (with validation being taken care of in the on*update
events). onrowexit
will also fire if the record position is changed through scripting. For more information on Data Binding, see the Data Binding topic.
onscroll
The onscroll
event is fired when the <TEXTAREA>
text box is scrolled, by the user using the scrollbars on the <TEXTAREA>
box.
© 1995-1998, Stephen Le Hunte