JavaScript DHTML/Form Control/TextArea

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

Append text to textarea

   
<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>



Auto type textarea

  

<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>



Is TextArea Multiline

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



Methods and Properties of the Textarea Object

  
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.



Not empty TextArea

  
<html>
<head>
<script language="JavaScript">
<!--
function validateForm(f) {
  if (f.value == "") {
     alert("Please enter some text into the feedback field");
     return false;
  }
  else
     return true;
  }
//-->
</script>
</head>
<body>
<pre>
<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>
</pre>
</body>
</html>



Select the text in text area

  
    
<html>
<body>
<script language="JavaScript">
    function function2() {
        document.all.myTextArea.select();
    }
</script>
<textarea id=myTextArea>Some text</textarea>
<input type="button" value="Select the textarea" onclick="function2()">
</body>
</html>



Set TextArea to be Active

  
    
<html>
<body>
<script language="JavaScript">
    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>



TextArea Columns Example

  
    
<html>
<body>
<textarea id="myText" rows="3" cols="15">
</textarea>
<br>
<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>



TextArea on change event

   
<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>



TextArea on key down event

   
<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>



TextArea on key press event

   
<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>



TextArea on key up event

   
<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>



Textarea rows

  
    
<html>
<body>
<textarea id="myText" rows="3" cols="15" onclick="ab();">
</textarea>
<br>
<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>



TextArea type

  
    
<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>



TextArea "value"

  
    
<html>
<head>
<script language="JavaScript">
    function function1() {
        alert(myTextArea1.value); 
    }
</script>
</head>
<body onload="function1();">
    <textarea id="myTextArea1">textarea value</textarea>
</body>
</html>



TextArea wrap

  
    
<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/TextArea&oldid=2517»