http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FForm%2FTextAreaJavaScript Tutorial/Form/TextArea - История изменений2026-04-05T23:31:03ZИстория изменений этой страницы в викиMediaWiki 1.30.0http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/TextArea&diff=9127&oldid=prevAdmin: 1 версия2010-05-26T08:24:49Z<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>Adminhttp://wbex.ru/index.php?title=JavaScript_Tutorial/Form/TextArea&diff=9126&oldid=prev в 18:52, 25 мая 20102010-05-25T18:52:56Z<p></p>
<p><b>Новая страница</b></p><div>== Textarea==<br />
<br />
<p>Instances are created by the browser when it encounters an HTML tag.</p><br />
<p>In the JavaScript object hierarchy, the Textarea object is located at window.document.Form.Textarea.</p><br />
Event Handlers/Methods/Properties<br />
Description<br />
onBlur<br />
Called when the text area loses the focus.<br />
onChange<br />
Called when the text area loses the focus and has had its value modified.<br />
onFocus<br />
Called when the text area receives the focus.<br />
onKeyDown<br />
Called when a key is pressed down. This occurs before an onKeyPress event handler is triggered.<br />
onKeyPress<br />
Called when a key is pressed down immediately after an onKeyDown event handler is triggered.<br />
onKeyUp<br />
Called when a key is released.<br />
onSelect<br />
Called when a user selects some of the text within the text area.<br />
blur()<br />
Removes the focus from the text area.<br />
focus()<br />
Gives the focus to the text area.<br />
handleEvent()<br />
Invokes the handler for the event specified.<br />
select()<br />
Selects the text in the text area.<br />
defaultValue<br />
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.<br />
form<br />
Returns the entire form the text area is in.<br />
name<br />
Returns the name of this text area specified by the NAME attribute.<br />
type<br />
Returns the type of this text area. Note that this is always textarea.<br />
value<br />
Returns the value that is actually displayed in the text area.<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function openWin(){<br />
var myInstance = document.myForm.myTextArea;<br />
var myWin = open("", "","width=450,height=200");<br />
myWin.document.write("The defaultValue is: " + myInstance.defaultValue + "<br>");<br />
myWin.document.write("The name is: " + myInstance.name + "<br>");<br />
myWin.document.write("The type is: " + myInstance.type + "<br>");<br />
myWin.document.write("The value is: " + myInstance.value + "<br>");<br />
myWin.document.write(myInstance.form.myButton.value);<br />
myWin.document.close();<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=6 cols=50><br />
Here is some text in my text area.<br />
</textarea><br />
<input type=BUTTON value="Click to Process" name="myButton" onClick="openWin()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.blur()==<br />
<br />
<p>The blur() method removes the focus from the text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function removeFocus(){<br />
document.myForm.myTextArea.blur();<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<b>Highlight some of the text in the following text area:</b><br />
<P><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=6 cols=50><br />
Here is some text in my text area.<br />
</textarea><br />
<input type=BUTTON value="Click to Remove Focus" name="myButton" onClick="removeFocus()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.defaultValue==<br />
<br />
<p>The defaultValue property contains the text between the beginning and ending tags.</p><br />
<p>This property is often used to reset areas to their default values after a user has modified them.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function resetForm(){<br />
document.myForm.myTextArea.value = document.myForm.myTextArea.defaultValue;<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<b>Edit the text in the following text box:</b><br />
<P><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=6 cols=50><br />
Here is some text in my text area.<br />
</textarea><br />
<input type=BUTTON value="Click to Reset" name="myButton"<br />
onClick="resetForm()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.focus()==<br />
<br />
<p>The focus() method gives the focus to the text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function setFocus(num){<br />
if(num == 1){<br />
document.myForm.myTextArea1.focus();<br />
}else if(num == 2){<br />
document.myForm.myTextArea2.focus();<br />
}<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<P><br />
<form name="myForm"><br />
<textarea name="myTextArea1" rows=2 cols=50><br />
Here is the first text area.<br />
</textarea><br />
<input type=BUTTON value="Click to Set Cursor" name="myButton1" onClick="setFocus(1)"><br />
<br><br />
<textarea name="myTextArea2" rows=2 cols=50><br />
Here is the second text area.<br />
</textarea><br />
<input type=BUTTON value="Click to Set Cursor" name="myButton2"<br />
onClick="setFocus(2)"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.form==<br />
<br />
<p>The form property holds all the data of the form in which the text box is contained.</p><br />
<p>This allows a developer to obtain specific information about the form in which the text area is located.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function openWin(){<br />
var formData = document.myForm.myTextArea.form;<br />
var myWin = open("", "","width=450,height=200");<br />
myWin.document.write("The name of the form is: " + formData.name + "<br>");<br />
myWin.document.write(formData.myTextArea.value + "<br>");<br />
myWin.document.write(formData.elements[1].name + "<br>");<br />
myWin.document.close();<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=6 cols=50><br />
Here is some text in my text area.<br />
</textarea><br />
<input type=BUTTON value="Click to Process" name="myButton" onClick="openWin()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.handleEvent()==<br />
<br />
<p>The handleEvent() method invokes the handler for the event specified.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript1.2"><br />
<!--<br />
var counter = 0;<br />
window.captureEvents(Event.CLICK)<br />
window.onClick = myClickHandler;<br />
function myClickHandler{<br />
window.document.myForm.myTextArea.handleEvent;<br />
}<br />
function changeText(){<br />
document.myForm.myTextArea.value = counter++;<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=6 cols=50 onClick="changeText()"><br />
Here is some text in my text area.<br />
</textarea><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.name==<br />
<br />
<p>The name property returns the name of the text area.</p><br />
<p>This property is often accessed via the elements array of a Form object and used to return the name of the text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function getName(){<br />
alert("The name of this text area is " + document.myForm.elements[0].name);<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=6 cols=50><br />
Here is some text in my text area.<br />
</textarea><br />
<input type=BUTTON value="Get Name" name="myButton" onClick="getName()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.onBlur==<br />
<br />
<p>The onBlur event handler is fired when the focus is moved away from that particular text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
var counter = 0;<br />
function comeBack(){<br />
document.myForm.myTextArea1.focus();<br />
document.myForm.counter.value = counter++;<br />
}<br />
--><br />
</script><br />
</head><br />
<body onLoad="comeBack()"><br />
<form name="myForm"><br />
<textarea name="myTextArea1" rows=2 cols=50 onBlur="comeBack()"><br />
Here is some text in my text area.<br />
</textarea><br />
<textarea name="myTextArea2" rows=2 cols=50><br />
Here is some text in my text area.<br />
</textarea><br><br />
<input type=TEXT size=2 value="" name="counter"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.onChange==<br />
<br />
<p>The onChange event handler is fired when the text in the area is modified.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function changeBack(){<br />
document.myForm.myTextArea.value = document.myForm.myTextArea.defaultValue;<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=2 cols=50 onChange="changeBack()"><br />
Here is some text in my text area.<br />
</textarea><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.onFocus==<br />
<br />
<p>The onFocus event handler fired when focus is made on that particular text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
var counter = 0;<br />
function sendAway(){<br />
document.myForm.myTextArea2.focus();<br />
document.myForm.counter.value = counter++;<br />
}<br />
--><br />
</script><br />
</head><br />
<body onLoad="sendAway()"><br />
<form name="myForm"><br />
<textarea name="myTextArea1" rows=2 cols=50 onFocus="sendAway()"><br />
Here is some text in my text area.<br />
</textarea><br />
<textarea name="myTextArea2" rows=2 cols=50><br />
Here is some text in my text area.<br />
</textarea><br />
<br><br />
<input type=TEXT size=2 value="" name="counter"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.onKeyDown==<br />
<br />
<p>The onKeyDown event handler is fired when a key is pressed down within the text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript1.2"><br />
<!--<br />
function showDialog(){<br />
alert("A key was pressed down");<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=2 cols=50 onKeyDown="showDialog()"><br />
Here is some text in my text area.<br />
</textarea><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.onKeyPress==<br />
<br />
<p>The onKeyPress event handler is fired when a key is pressed within the text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript1.2"><br />
<!--<br />
function showDialog(type){<br />
alert("An onKey" + type + " event just occurred");<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=2 cols=50<br />
onKeyDown="showDialog("Down")"<br />
onKeyPress="showDialog("Press")"><br />
Here is some text in my text area.<br />
</textarea><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.onKeyUp==<br />
<br />
<p>The onKeyUp event handler is fired when a key is released within the text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript1.2"><br />
<!--<br />
function showDialog(){<br />
alert("A key was released");<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=2 cols=50 onKeyUp="showDialog()"><br />
Here is some text in my text area.<br />
</textarea><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.onSelect==<br />
<br />
<p>The onSelect event handler is fired when the text in the area is highlighted.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function setText(){<br />
document.myForm.myTextArea2.value = document.myForm.myTextArea1.defaultValue;<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea1" rows=2 cols=50 onSelect="setText()"><br />
Here is some text in my text area.<br />
</textarea><br />
<br><br />
<textarea name="myTextArea2" rows=2 cols=50><br />
</textarea><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.select()==<br />
<br />
<p>The select() method selects the text in the text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function selectText(){<br />
document.myForm.myTextArea.select();<br />
document.myForm.myTextArea.focus();<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=6 cols=50><br />
Here is some text in my text area.<br />
</textarea><br />
<input type=BUTTON value="Click to Select Text" name="myButton" onClick="selectText()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.type==<br />
<br />
<p>The type property returns the type of the text area.</p><br />
<p>This always returns textarea.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript1.1"><br />
<!--<br />
function getType(){<br />
alert("The name of this text area is " + document.myForm.elements[0].type);<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=6 cols=50><br />
Here is some text in my text area.<br />
</textarea><br />
<input type=BUTTON value="Get Type" name="myButton" onClick="getType()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Textarea.value==<br />
<br />
<p>The value property returns the current value of the text area.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function resetText(){<br />
document.myForm.myTextArea.value = document.myForm.myTextArea.defaultValue;<br />
}<br />
--><br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<textarea name="myTextArea" rows=6 cols=50><br />
Here is some text in my text area.<br />
</textarea><br />
<input type=BUTTON value="Reset" name="myButton" onClick="resetText()"><br />
</form><br />
</body><br />
</html></source></div>