텍스트영역 리사이즈 컴포넌트

Richard McMahon씨는 Prototype을 이용한 "ResizingTextArea" 컴포넌트를 만들고 공개했다. 이 컴포넌트는 클릭(click)과 키업(keyup)이벤트를 할당하여 텍스트 영역의 Row를 감시하고 실시간으로 리사이즈 한다. 이 블로그의 댓글과 방명록 텍스트 영역에 적용해 보았다.(썩 쓸만함)

/**
* ResizingTextArea Component
* Richard McMahon(http://jroller.com)
*/
var ResizingTextArea = Class.create();
ResizingTextArea.prototype = {
   defaultRows: 1,
   initialize: function(field) {
       this.defaultRows = Math.max(field.rows, 1);
       this.resizeNeeded = this.resizeNeeded.bindAsEventListener(this);
       Event.observe(field, "click", this.resizeNeeded);
       Event.observe(field, "keyup", this.resizeNeeded);
   },
   resizeNeeded: function(event) {
       var t = Event.element(event);
       var lines = t.value.split('\n');
       var newRows = lines.length + 1;
       var oldRows = t.rows;
       for (var i = 0; i < lines.length; i++) {
           var line = lines[i];
           if (line.length >= t.cols) newRows += Math.floor(line.length / t.cols);
       }
       if (newRows > t.rows) t.rows = newRows;
       if (newRows < t.rows) t.rows = Math.max(this.defaultRows, newRows);
   }
}

사용법 : <textarea ... onfocus="new ResizingTextArea(this);">

출처 : http://firejune.com/1026&ct1=8&ct2=42