|
Copied To Clipboard!
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Auto-Magically Growing Textarea Box</title>
<style>
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
textarea.noscrollbars {
overflow: hidden;
width: 300px;
height: 100px;
}
</style>
<script>
<!--
// Begin Auto-Magically Growing Textarea Box
// == This Script Free To Use Providing This Notice Remains == //
// == This Script Has Been Found In The http://www.SnapBuilder.com Free Public Codes Library == //
// == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == //
function autoGrow (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
// -->
</script>
</head>
<body>
<div id="content">
<h3>Auto-Magically Growing Textarea Box</h3>
<p>Go ahead, enter enough text or hit your enter button several times to watch the textarea box auto-magically grow by itself.</p>
<form name="myForm">
<fieldset>
<legend>Your comments</legend>
<p><textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea></p>
<p><input type="submit" value="Send" /></p>
</fieldset>
</form>
<br /><br /><br /><br /><br />
<p>
[ This code example from <a href="http://snapbuilder.com/code_snippets/snippet.php?sid=188">Auto-Magically Growing Textarea Box Code Snippet</a> page. ]
</p>
</div>
</body>
</html>
|