MaxInterview - autosize a textarea using prototype

showing results for - "autosize a textarea using prototype"

28 Mar 2020

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2  "http://www.w3.org/TR/html4/loose.dtd">
3<html>
4    <head>
5        <script src="http://www.google.com/jsapi"></script>
6        <script language="javascript">
7            google.load('prototype', '1.6.0.2');
8        </script>
9    </head>
10
11    <body>
12        <textarea id="text-area" rows="1" cols="50"></textarea>
13
14        <script type="text/javascript" language="javascript">
15            resizeIt = function() {
16              var str = $('text-area').value;
17              var cols = $('text-area').cols;
18
19              var linecount = 0;
20              $A(str.split("\n")).each( function(l) {
21                  linecount += Math.ceil( l.length / cols ); // Take into account long lines
22              })
23              $('text-area').rows = linecount + 1;
24            };
25
26            // You could attach to keyUp, etc. if keydown doesn't work
27            Event.observe('text-area', 'keydown', resizeIt );
28
29            resizeIt(); //Initial on load
30        </script>
31    </body>
32</html>
33

source