JavaScript Tutorial/Form/TextArea

Содержание

1 Textarea
2 Textarea.blur()
3 Textarea.defaultValue
4 Textarea.focus()
5 Textarea.form
6 Textarea.handleEvent()
7 Textarea.name
8 Textarea.onBlur
9 Textarea.onChange
10 Textarea.onFocus
11 Textarea.onKeyDown
12 Textarea.onKeyPress
13 Textarea.onKeyUp
14 Textarea.onSelect
15 Textarea.select()
16 Textarea.type
17 Textarea.value

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.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function openWin(){
      var myInstance = document.myForm.myTextArea;
      var myWin = open("", "","width=450,height=200");
      myWin.document.write("The defaultValue is: " + myInstance.defaultValue + "<br>");
      myWin.document.write("The name is: " + myInstance.name + "<br>");
      myWin.document.write("The type is: " + myInstance.type + "<br>");
      myWin.document.write("The value is: " + myInstance.value + "<br>");
      myWin.document.write(myInstance.form.myButton.value);
      myWin.document.close();
    }
    -->
    </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>

Textarea.blur()

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

<html>
    <head>
    <script language="JavaScript">
    <!--
    function removeFocus(){
      document.myForm.myTextArea.blur();
    }
    -->
    </script>
    </head>
    <body>
    <b>Highlight some of the text in the following text area:</b>
    <P>
    <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>

Textarea.defaultValue

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.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function resetForm(){
      document.myForm.myTextArea.value = document.myForm.myTextArea.defaultValue;
    }
    -->
    </script>
    </head>
    <body>
    <b>Edit the text in the following text box:</b>
    <P>
    <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>

Textarea.focus()

The focus() method gives the focus to the text area.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function setFocus(num){
      if(num == 1){
        document.myForm.myTextArea1.focus();
      }else if(num == 2){
        document.myForm.myTextArea2.focus();
      }
    }
    -->
    </script>
    </head>
    <body>
    <P>
    <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)">
      <br>
      <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>

Textarea.form

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.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function openWin(){
      var formData = document.myForm.myTextArea.form;
      var myWin = open("", "","width=450,height=200");
      myWin.document.write("The name of the form is: " + formData.name + "<br>");
      myWin.document.write(formData.myTextArea.value + "<br>");
      myWin.document.write(formData.elements[1].name + "<br>");
      myWin.document.close();
    }
    -->
    </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>

Textarea.handleEvent()

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

<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    var counter = 0;
    window.captureEvents(Event.CLICK)
    window.onClick = myClickHandler;
    function myClickHandler{
      window.document.myForm.myTextArea.handleEvent;
    }
    function changeText(){
      document.myForm.myTextArea.value = counter++;
    }
    -->
    </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>

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.

<html>
    <head>
    <script language="JavaScript">
    <!--
    function getName(){
      alert("The name of this text area is " + document.myForm.elements[0].name);
    }
    -->
    </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>

Textarea.onBlur

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

<html>
    <head>
    <script language="JavaScript">
    <!--
    var counter = 0;
    function comeBack(){
      document.myForm.myTextArea1.focus();
      document.myForm.counter.value = counter++;
    }
    -->
    </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><br>
      <input type=TEXT size=2 value="" name="counter">
    </form>
    </body>
    </html>

Textarea.onChange

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

<html>
    <head>
    <script language="JavaScript">
    <!--
    function changeBack(){
      document.myForm.myTextArea.value = document.myForm.myTextArea.defaultValue;
    }
    -->
    </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>

Textarea.onFocus

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

<html>
    <head>
    <script language="JavaScript">
    <!--
    var counter = 0;
    function sendAway(){
      document.myForm.myTextArea2.focus();
      document.myForm.counter.value = counter++;
    }
    -->
    </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>
      <br>
      <input type=TEXT size=2 value="" name="counter">
    </form>
    </body>
    </html>

Textarea.onKeyDown

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

<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    function showDialog(){
      alert("A key was pressed down");
    }
    -->
    </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>

Textarea.onKeyPress

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

<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    function showDialog(type){
      alert("An onKey" + type + " event just occurred");
    }
    -->
    </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>

Textarea.onKeyUp

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

<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    function showDialog(){
      alert("A key was released");
    }
    -->
    </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>

Textarea.onSelect

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

<html>
    <head>
    <script language="JavaScript">
    <!--
    function setText(){
      document.myForm.myTextArea2.value = document.myForm.myTextArea1.defaultValue;
    }
    -->
    </script>
    </head>
    <body>
    <form name="myForm">
      <textarea name="myTextArea1" rows=2 cols=50 onSelect="setText()">
      Here is some text in my text area.
      </textarea>
      <br>
      <textarea name="myTextArea2" rows=2 cols=50>
      </textarea>
    </form>
    </body>
    </html>

Textarea.select()

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

<html>
    <head>
    <script language="JavaScript">
    <!--
    function selectText(){
      document.myForm.myTextArea.select();
      document.myForm.myTextArea.focus();
    }
    -->
    </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>

Textarea.type

The type property returns the type of the text area.

This always returns textarea.

<html>
    <head>
    <script language="JavaScript1.1">
    <!--
    function getType(){
      alert("The name of this text area is " + document.myForm.elements[0].type);
    }
    -->
    </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>

Textarea.value

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

<html>
    <head>
    <script language="JavaScript">
    <!--
    function resetText(){
      document.myForm.myTextArea.value = document.myForm.myTextArea.defaultValue;
    }
    -->
    </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>