JavaScript DHTML/Form Control/TextArea

Содержание

1 Append text to textarea
2 Auto type textarea
3 Is TextArea Multiline
4 Methods and Properties of the Textarea Object
5 Not empty TextArea
6 Select the text in text area
7 Set TextArea to be Active
8 TextArea Columns Example
9 TextArea on change event
10 TextArea on key down event
11 TextArea on key press event
12 TextArea on key up event
13 Textarea rows
14 TextArea type
15 TextArea "value"
16 TextArea wrap

Append text to textarea

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function DisplayEvent(eventName){

  var myMessage = window.document.form1.textarea1.value;    
  myMessage = myMessage + eventName;    
  window.document.form1.textarea1.value = myMessage;

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1>

  <TEXTAREA ROWS=15 COLS=40 NAME=textarea1 
     onchange="DisplayEvent("onchange\n");" 
     onkeydown="DisplayEvent("onkeydown\n");" 
     onkeypress="DisplayEvent("onkeypress\n");" 
     onkeyup="DisplayEvent("onkeyup\n\n");">
     press your key here.
  </TEXTAREA>
  <INPUT TYPE="button" VALUE="Clear Event TextArea" 
     NAME=button1 onclick="window.document.form1.textarea1.value="""> </FORM>

</BODY> </HTML>

 </source>

Auto type textarea

   <source lang="html4strict">

<html> <head> <SCRIPT LANGUAGE = "JavaScript"> /* This source code is released to the public domain with the provision that the copyright information remains in the source code. Copyright (c) by: Robert N Bovara All Rights Reserved.

/

var outMsg = ""; var i = 0; var lineNo = 1; var timerDM=null; var msg = " "; function araVob() { } var ScreenLine = new araVob(); ScreenLine[1] = "Doesn"t this look better than status bar displays?" ScreenLine[2] = "Isn"t this easier to read than \"sideways\" scrollers?" ScreenLine[3] = " "; ScreenLine[4] = "How many lines can you display on the status bar?" ScreenLine[5] = "Here, you can not only display more than one line,\f "; ScreenLine[6] = "But, you can also display more than one \"page\" !" ScreenLine[7] = " "; ScreenLine[8] = "Aren"t you glad your browser interprets JavaScript (JScript)?" ScreenLine[9] = " "; ScreenLine[10] = "Enjoy!....\f"; ScreenLine[11] = "P.S.\t"Tis better to have no moving text at all ....." ScreenLine[12] = "\t... than to have a \"sideways\" scroller."; ScreenLine[13] = " \f"; /* To change or add messages, just replace values of or add to ScreenLine[n] above. Each ScreenLine[n] is a separate line. To change the "page" before the defined page length is reached, insert a \f character at the end of the line where you want the break. Use \" for quotes and \t for tabs in the message text.

/

var msgNum = 1; // set to first message to display var msgCnt = 13; // set to number of last message "page" to display. var typeSpeed = 70; // the typing rate, in milliseconds. (Higher number is slower) var pageLen = 5; // set to page size, usually number of ROWS in TEXTAREA var delay=typeSpeed; var r = 0; var cr="\r\n" if ("3" <=navigator.appVersion.charAt(0)) {

var cr="\n"

} for (x = 1; x<=(msgCnt); x++) {

 ScreenLine[x] = ScreenLine[x] + cr;

} msg = ScreenLine[1]; function DisplayMsg() {

 if (msg.length <= i || msg.charAt(i) == "\f") {
   r=i;
   i=0;
   ChangeMsg();
 }
 outMsg = outMsg + msg.charAt(i);
 i++; 
 if (msg.charAt(i) == "\f" || (lineNo == pageLen && i==msg.length)) {
   delay = 4000; }
 else {
 if (msg.charAt(i) == cr && msg != " "+cr) {
   delay = 2000; }
 else {
   delay = typeSpeed; } 
 }
 self.document.forms[0].elements[0].value=outMsg;
 timerDM = setTimeout("DisplayMsg()",delay);

} function ChangeMsg() {

msgNum++;
if (msgCnt < msgNum) {
  msgNum = 1;
}
lineNo++;
if (pageLen < lineNo || msg.charAt(r) == "\f") {
 outMsg=ScreenLine[msgNum].charAt(i);
 i++;
 lineNo = 1;
}
 msg = ScreenLine[msgNum];

} function quitDisplay() {

 self.document.forms[0].elements[0].value = "Type yourself a Note today!";

} // --> </SCRIPT> </head> <body onLoad="DisplayMsg()"; onUnload="quitDisplay()"> <FORM NAME= "msgform" ACTION=" ">

    <TEXTAREA NAME="msgarea" COLS=80 ROWS=5> 
    JavaScript (or JScript) Power needed. 
    </TEXTAREA>

</FORM> </body> </html>

 </source>

Is TextArea Multiline

   <source lang="html4strict">

<html> <body> <textarea id="myText" cols="200" rows="20"></textarea> <button onclick="alert(myText.isMultiLine);">Is Textarea Multiline</button> </body> </html>

 </source>

Methods and Properties of the Textarea Object

   <source lang="html4strict">

Method blur() Removes the focus from the text area. focus() Gives the focus to the text area. handleEvent() Invokes the default handler for the specified event. select() Selects the text in the text area. Property defaultValue Returns the value defined between the beginning and ending "textarea" tags. 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. value Returns the value that is actually displayed in the text area.

 </source>

Not empty TextArea

   <source lang="html4strict">

</script> </head> <body>

<form name="myForm" method="post" action="http://www.wbex.ru" onSubmit="validateForm(myForm.feedback)">
Full Name: <input type="text" size=30 name="persons_name"><br>
Feedback : <textarea name="feedback" rows=5 cols=50></textarea><p>
<input type="submit" value="Send Data">
</form>

</body> </html>

 </source>

Select the text in text area

   <source lang="html4strict">

   function function2() {
       document.all.myTextArea.select();
   }

</script> <textarea id=myTextArea>Some text</textarea> <input type="button" value="Select the textarea" onclick="function2()"> </body> </html>

 </source>

Set TextArea to be Active

   <source lang="html4strict">

   function function1() {
       document.all.myTextArea.setActive();
   }

</script> <textarea id="myTextArea">Some text</textarea> <input type="button"

      value="Insert the cursor inside the textarea" 
      onclick="function1();">

</body> </html>

 </source>

TextArea Columns Example

   <source lang="html4strict">

<html> <body> <textarea id="myText" rows="3" cols="15"> </textarea>
<button onclick="myText.cols=100;">Set width of Textarea to 100</button> <button onclick="myText.rows=20;">Set height of Textarea to 20</button> </body> </html>

 </source>

TextArea on change event

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function DisplayEvent(eventName){

  var myMessage = window.document.form1.textarea1.value;    
  myMessage = myMessage + eventName;    
  window.document.form1.textarea1.value = myMessage;

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1>

  <TEXTAREA ROWS=15 COLS=40 NAME=textarea1 
     onchange="DisplayEvent("onchange\n");" 
     onkeydown="DisplayEvent("onkeydown\n");" 
     onkeypress="DisplayEvent("onkeypress\n");" 
     onkeyup="DisplayEvent("onkeyup\n\n");">
     press your key here.
  </TEXTAREA>
  <INPUT TYPE="button" VALUE="Clear Event TextArea" 
     NAME=button1 onclick="window.document.form1.textarea1.value="""> </FORM>

</BODY> </HTML>

 </source>

TextArea on key down event

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function DisplayEvent(eventName){

  var myMessage = window.document.form1.textarea1.value;    
  myMessage = myMessage + eventName;    
  window.document.form1.textarea1.value = myMessage;

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1>

  <TEXTAREA ROWS=15 COLS=40 NAME=textarea1 
     onchange="DisplayEvent("onchange\n");" 
     onkeydown="DisplayEvent("onkeydown\n");" 
     onkeypress="DisplayEvent("onkeypress\n");" 
     onkeyup="DisplayEvent("onkeyup\n\n");">
     press your key here.
  </TEXTAREA>
  <INPUT TYPE="button" VALUE="Clear Event TextArea" 
     NAME=button1 onclick="window.document.form1.textarea1.value="""> </FORM>

</BODY> </HTML>

 </source>

TextArea on key press event

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function DisplayEvent(eventName){

  var myMessage = window.document.form1.textarea1.value;    
  myMessage = myMessage + eventName;    
  window.document.form1.textarea1.value = myMessage;

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1>

  <TEXTAREA ROWS=15 COLS=40 NAME=textarea1 
     onchange="DisplayEvent("onchange\n");" 
     onkeydown="DisplayEvent("onkeydown\n");" 
     onkeypress="DisplayEvent("onkeypress\n");" 
     onkeyup="DisplayEvent("onkeyup\n\n");">
     press your key here.
  </TEXTAREA>
  <INPUT TYPE="button" VALUE="Clear Event TextArea" 
     NAME=button1 onclick="window.document.form1.textarea1.value="""> </FORM>

</BODY> </HTML>

 </source>

TextArea on key up event

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function DisplayEvent(eventName){

  var myMessage = window.document.form1.textarea1.value;    
  myMessage = myMessage + eventName;    
  window.document.form1.textarea1.value = myMessage;

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1>

  <TEXTAREA ROWS=15 COLS=40 NAME=textarea1 
     onchange="DisplayEvent("onchange\n");" 
     onkeydown="DisplayEvent("onkeydown\n");" 
     onkeypress="DisplayEvent("onkeypress\n");" 
     onkeyup="DisplayEvent("onkeyup\n\n");">
     press your key here.
  </TEXTAREA>
  <INPUT TYPE="button" VALUE="Clear Event TextArea" 
     NAME=button1 onclick="window.document.form1.textarea1.value="""> </FORM>

</BODY> </HTML>

 </source>

Textarea rows

   <source lang="html4strict">

<html> <body> <textarea id="myText" rows="3" cols="15" onclick="ab();"> </textarea>
<button onclick="myText.cols=100;">Set width of Textarea to 100</button> <button onclick="myText.rows=20;">Set height of Textarea to 20</button> </body> </html>

 </source>

TextArea type

   <source lang="html4strict">

<html> <head> <script language="JavaScript"> function function1() {

   alert("The "myTextArea" element has a type value of:\n"+myTextArea.type);

} </script> </head> <body> <textarea name="myTextArea" cols="20" rows="8"> </textarea> <input type="button" value="Click here" onClick="function1();"> </body> </html>

 </source>

TextArea "value"

   <source lang="html4strict">

   function function1() {
       alert(myTextArea1.value); 
   }

</script> </head> <body onload="function1();">

   <textarea id="myTextArea1">textarea value</textarea>

</body> </html>

 </source>

TextArea wrap

   <source lang="html4strict">

<html> <body> <textarea id="myTextArea1" rows="4">Long text Long text Long text </textarea> <textarea id="myTextArea2" rows="4">Long text Long text Long text </textarea> <textarea id="myTextArea3" rows="4">Long text Long text Long text </textarea> <script language="JavaScript"> document.all.myTextArea1.wrap = "soft"; document.all.myTextArea2.wrap = "hard"; document.all.myTextArea3.wrap = "off"; </script> </body> </html>

 </source>

JavaScript DHTML/Form Control/TextArea

Содержание

Append text to textarea

Auto type textarea

Is TextArea Multiline

Methods and Properties of the Textarea Object

Not empty TextArea

Select the text in text area

Set TextArea to be Active

TextArea Columns Example

TextArea on change event

TextArea on key down event

TextArea on key press event

TextArea on key up event

Textarea rows

TextArea type

TextArea "value"

TextArea wrap

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты