[해피CGI][cgimall] 텍스트 에어리어 자동높이/최대높이 Auto Resizing Textarea with max-height

 

 

텍스트를 입력하면 자동으로 높이가 늘어납니다.

 

 

 

스크립트 소스상에 지정된 높이보다 늘어나게 되면 스크롤바가 출력되고 더 이상 높이가 증가하지 않습니다.

 

 

 

 

$('#contact-form').on( 'change keydown keyup paste cut', 'textarea', function () { 
  $(this).height(0).height(this.scrollHeight+2);
  if ($(this).height() >= 300) {
    $('textarea#message').css("overflow", "auto");
  }
  else {
    $('textarea#message').css("overflow", "hidden");
  }
}).find('textarea#message').change();
  
/*
alternative way of doing it

 

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}

var text = document.getElementById('text');
function resize () {
  text.style.height = 'auto';
  text.style.height = (text.scrollHeight+20)+'px';
}

function delayedResize () {
  window.setTimeout(resize, 0);
}
observe(text, 'change',  resize);
observe(text, 'cut',     delayedResize);
observe(text, 'paste',   delayedResize);
observe(text, 'drop',    delayedResize);
observe(text, 'keydown', delayedResize);

text.focus();
text.select();
resize();
*/