Contao Textarea Autoheight

Andreas Burg

by Andreas Burg

HTML

<div class="toggler">
  toggle wrap
  <img id="img" width="14" height="14" class="toggleWrap" title="" alt="Zeilenumbruch" src="http://demo.contao.org/system/themes/default/images/wrap.gif">
</div>

<textarea cols="80" rows="12" class="tl_textarea" id="ctrl_head" name="head">&lt;link rel="stylesheet" href="files/css/basic.css"&gt;
&lt;link rel="stylesheet" href="files/css/custom.css"&gt;
&lt;script src="files/js/misc.js"&gt;&lt;/script&gt;

This is one long line with text. This is one long line with text. This is one long line with text. This is one long line with text. This is one long line with text. This is one long line with text. This is one long line with text. This is one long line with text. This is one long line with text. This is one long line with text.</textarea>

CSS

.toggler {
  cursor: pointer;
  margin-bottom: 1em;
}
.toggleWrap {
  display: inline-block;  
}
textarea {
  resize: vertical;
  border: 1px solid #B8B8B8;
  border-radius: 3px;
  padding: 2px 3px;
  width: 676px;
  margin: 1px 0;
  font-size: 12px;
  color: #666966;
  font-family: "Trebuchet MS",Verdana,sans-serif;
}

JavaScript

var
  textareas = $$('textarea'),
  textareaAutoHeight = function(el){
    el.set('rows', el.value.split('\n').length+1);
    el.setStyle('height', 'auto'); // if you want to adjust also after manual resizing by user
    //el.setStyle('height', ''); // height for textareas should be removed from css and then use this setting
  }
;

// Init
Array.each(textareas, function(item){
  item.set({
    styles: {
      overflowY: 'auto' // This should be set here with JS
    },
   wrap: 'off'
  });
  textareaAutoHeight(item);
});

// Event listener (pause 250 is default without value in brackets)
if(Browser.ie && Browser.version <= 8){
  textareas.addEvent('keyup:pause(250)', function(){
    textareaAutoHeight(this);
  });
}
else {
  textareas.addEvent('input', function(){
    textareaAutoHeight(this);
  });
}

// Event for wrap toggler
$$('.toggler').addEvent('click', function(){
  $('ctrl_head').set('wrap', $('ctrl_head').get('wrap') == 'off' ? 'soft' : 'off');
});