Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Javascript Codes Library >> Email & Contact Forms >> Auto-Magically Growing Textarea Box


Code Snippet </> Info


Snippet Name: Auto-Magically Growing Textarea Box

Description: Add a auto-magically growing textarea box to your web forms.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2014-05-25 10:22:31

Language: html

Highlight Mode: html

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

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


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library