How to autosize a textarea using Prototype? How to autosize a textarea using Prototype? javascript javascript

How to autosize a textarea using Prototype?


javascript html css textarea prototypejs

Facebook does it, when you write on people's walls, but only resizes vertically.

Horizontal resize strikes me as being a mess, due to word-wrap, long lines, and so on, but vertical resize seems to be pretty safe and nice.

None of the Facebook-using-newbies I know have ever mentioned anything about it or been confused. I'd use this as anecdotal evidence to say 'go ahead, implement it'.

Some JavaScript code to do it, using Prototype (because that's what I'm familiar with):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <script src="http://www.google.com/jsapi"></script>        <script language="javascript">            google.load('prototype', '1.6.0.2');        </script>    </head>    <body>        <textarea id="text-area" rows="1" cols="50"></textarea>        <script type="text/javascript" language="javascript">            resizeIt = function() {              var str = $('text-area').value;              var cols = $('text-area').cols;              var linecount = 0;              $A(str.split("\n")).each( function(l) {                  linecount += Math.ceil( l.length / cols ); // Take into account long lines              })              $('text-area').rows = linecount + 1;            };            // You could attach to keyUp, etc. if keydown doesn't work            Event.observe('text-area', 'keydown', resizeIt );            resizeIt(); //Initial on load        </script>    </body></html>

PS: Obviously this JavaScript code is very naive and not well tested, and you probably don't want to use it on textboxes with novels in them, but you get the general idea.

javascript html css textarea prototypejs

One refinement to some of these answers is to let CSS do more of the work.

The basic route seems to be:

  1. Create a container element to hold the textarea and a hidden div
  2. Using Javascript, keep the textarea’s contents synced with the div’s
  3. Let the browser do the work of calculating the height of that div
  4. Because the browser handles rendering / sizing the hidden div, we avoidexplicitly setting the textarea’s height.

document.addEventListener('DOMContentLoaded', () => {    textArea.addEventListener('change', autosize, false)    textArea.addEventListener('keydown', autosize, false)    textArea.addEventListener('keyup', autosize, false)    autosize()}, false)function autosize() {    // Copy textarea contents to div browser will calculate correct height    // of copy, which will make overall container taller, which will make    // textarea taller.    textCopy.innerHTML = textArea.value.replace(/\n/g, '<br/>')}
html, body, textarea {    font-family: sans-serif;    font-size: 14px;}.textarea-container {    position: relative;}.textarea-container > div, .textarea-container > textarea {    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */    box-sizing: border-box;    padding: 2px;    width: 100%;}.textarea-container > textarea {    overflow: hidden;    position: absolute;    height: 100%;}.textarea-container > div {    padding-bottom: 1.5em; /* A bit more than one additional line of text. */     visibility: hidden;}
<div class="textarea-container">    <textarea id="textArea"></textarea>    <div id="textCopy"></div></div>
Expand snippet