JavaScript Tutorial/Form/TextArea

Материал из Web эксперт
Перейти к: навигация, поиск

Textarea

Instances are created by the browser when it encounters an HTML tag.

In the JavaScript object hierarchy, the Textarea object is located at window.document.Form.Textarea.

Event Handlers/Methods/Properties Description onBlur Called when the text area loses the focus. onChange Called when the text area loses the focus and has had its value modified. onFocus Called when the text area receives the focus. onKeyDown Called when a key is pressed down. This occurs before an onKeyPress event handler is triggered. onKeyPress Called when a key is pressed down immediately after an onKeyDown event handler is triggered. onKeyUp Called when a key is released. onSelect Called when a user selects some of the text within the text area. blur() Removes the focus from the text area. focus() Gives the focus to the text area. handleEvent() Invokes the handler for the event specified. select() Selects the text in the text area. defaultValue Returns the value of this text area defined between the beginning and ending tags. Note that this property is not supported by the Opera browsers. form Returns the entire form the text area is in. name Returns the name of this text area specified by the NAME attribute. type Returns the type of this text area. Note that this is always textarea. value Returns the value that is actually displayed in the text area. 



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=6 cols=50>
     Here is some text in my text area.
     </textarea>
     <input type=BUTTON value="Click to Process" name="myButton" onClick="openWin()">
   </form>
   </body>
   </html></source>

Textarea.blur()

The blur() method removes the focus from the text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   Highlight some of the text in the following text area:

<form name="myForm"> <textarea name="myTextArea" rows=6 cols=50> Here is some text in my text area. </textarea> <input type=BUTTON value="Click to Remove Focus" name="myButton" onClick="removeFocus()"> </form> </body> </html></source>

Textarea.defaultValue

<p>The defaultValue property contains the text between the beginning and ending tags.

This property is often used to reset areas to their default values after a user has modified them.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   Edit the text in the following text box:

<form name="myForm"> <textarea name="myTextArea" rows=6 cols=50> Here is some text in my text area. </textarea> <input type=BUTTON value="Click to Reset" name="myButton" onClick="resetForm()"> </form> </body> </html></source>

Textarea.focus()

<p>The focus() method gives the focus to the text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>

<form name="myForm"> <textarea name="myTextArea1" rows=2 cols=50> Here is the first text area. </textarea> <input type=BUTTON value="Click to Set Cursor" name="myButton1" onClick="setFocus(1)">
<textarea name="myTextArea2" rows=2 cols=50> Here is the second text area. </textarea> <input type=BUTTON value="Click to Set Cursor" name="myButton2" onClick="setFocus(2)"> </form> </body> </html></source>

Textarea.form

<p>The form property holds all the data of the form in which the text box is contained.

This allows a developer to obtain specific information about the form in which the text area is located.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=6 cols=50>
     Here is some text in my text area.
     </textarea>
   <input type=BUTTON value="Click to Process" name="myButton" onClick="openWin()">
   </form>
   </body>
   </html></source>

Textarea.handleEvent()

The handleEvent() method invokes the handler for the event specified.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript1.2">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=6 cols=50 onClick="changeText()">
     Here is some text in my text area.
     </textarea>
   </form>
   </body>
   </html></source>

Textarea.name

The name property returns the name of the text area.

This property is often accessed via the elements array of a Form object and used to return the name of the text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=6 cols=50>
     Here is some text in my text area.
     </textarea>
     <input type=BUTTON value="Get Name" name="myButton" onClick="getName()">
   </form>
   </body>
   </html></source>

Textarea.onBlur

The onBlur event handler is fired when the focus is moved away from that particular text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body onLoad="comeBack()">
   <form name="myForm">
     <textarea name="myTextArea1" rows=2 cols=50 onBlur="comeBack()">
       Here is some text in my text area.
     </textarea>
     <textarea name="myTextArea2" rows=2 cols=50>
     Here is some text in my text area.
     </textarea>

     <input type=TEXT size=2 value="" name="counter">
   </form>
   </body>
   </html></source>

Textarea.onChange

The onChange event handler is fired when the text in the area is modified.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=2 cols=50 onChange="changeBack()">
     Here is some text in my text area.
     </textarea>
   </form>
   </body>
   </html></source>

Textarea.onFocus

The onFocus event handler fired when focus is made on that particular text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body onLoad="sendAway()">
   <form name="myForm">
     <textarea name="myTextArea1" rows=2 cols=50 onFocus="sendAway()">
     Here is some text in my text area.
     </textarea>
     <textarea name="myTextArea2" rows=2 cols=50>
     Here is some text in my text area.
     </textarea>
     

     <input type=TEXT size=2 value="" name="counter">
   </form>
   </body>
   </html></source>

Textarea.onKeyDown

The onKeyDown event handler is fired when a key is pressed down within the text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript1.2">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=2 cols=50 onKeyDown="showDialog()">
     Here is some text in my text area.
     </textarea>
   </form>
   </body>
   </html></source>

Textarea.onKeyPress

The onKeyPress event handler is fired when a key is pressed within the text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript1.2">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=2 cols=50
               onKeyDown="showDialog("Down")"
               onKeyPress="showDialog("Press")">
     Here is some text in my text area.
     </textarea>
   </form>
   </body>
   </html></source>

Textarea.onKeyUp

The onKeyUp event handler is fired when a key is released within the text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript1.2">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=2 cols=50 onKeyUp="showDialog()">
     Here is some text in my text area.
     </textarea>
   </form>
   </body>
   </html></source>

Textarea.onSelect

The onSelect event handler is fired when the text in the area is highlighted.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea1" rows=2 cols=50 onSelect="setText()">
     Here is some text in my text area.
     </textarea>
     

     <textarea name="myTextArea2" rows=2 cols=50>
     </textarea>
   </form>
   </body>
   </html></source>

Textarea.select()

The select() method selects the text in the text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=6 cols=50>
     Here is some text in my text area.
     </textarea>
   <input type=BUTTON value="Click to Select Text" name="myButton" onClick="selectText()">
   </form>
   </body>
   </html></source>

Textarea.type

The type property returns the type of the text area.

This always returns textarea.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript1.1">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=6 cols=50>
     Here is some text in my text area.
     </textarea>
     <input type=BUTTON value="Get Type" name="myButton" onClick="getType()">
   </form>
   </body>
   </html></source>

Textarea.value

The value property returns the current value of the text area.



   <source lang="javascript">

<html> 

   <head>
   <script language="JavaScript">
   
   </script>
   </head>
   <body>
   <form name="myForm">
     <textarea name="myTextArea" rows=6 cols=50>
     Here is some text in my text area.
     </textarea>
     <input type=BUTTON value="Reset" name="myButton" onClick="resetText()">
   </form>
   </body>
   </html></source>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/TextArea&oldid=9127»