텍스트영역 리사이즈 컴포넌트
페이지 정보
작성자 서방님 댓글 0건 조회 138회 작성일 08-08-20 11:29본문
Richard McMahon씨는 Prototype을 이용한 "ResizingTextArea" 컴포넌트를 만들고 공개했다. 이 컴포넌트는 클릭(click)과 키업(keyup)이벤트를 할당하여 텍스트 영역의 Row를 감시하고 실시간으로 리사이즈 한다. 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);"> |
출처 : FireJune´s
댓글목록
등록된 댓글이 없습니다.