Rev. 2.73

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);">

Comments

Got something to add? You can just leave a comment.

  • 이세왕 이세왕

    resizeNeeded: function(Event) { 의 Event를 다른변수로 줘야 하네요...

    reply edit

  • 앗 큰 실수를 저질렀군요. 알려주셔서 감사합니다.

    reply edit

  • 여기에 나온 소스를 복사해서 사용하면 잘 안됩니다.

    소스는 원본화면으로 가셔서 복사하시는것이 좋을거 같군요..

    좋은 소스 공유 감사합니다.

    reply edit

  • 아 오타가 있군요. 이세왕님께서 말슴하신것 처럼 resizeNeeded의 인수는 Event가 아닌 event 입니다. 코드 하이라이트를 적용시키면서 잘못 반영된 것 같습니다. 대단히 죄송합니다. 올바로 수정하였습니다.

    reply edit

Your Reaction Time!

captcha

avatar