jindo.m.TextArea

TextArea (JMC)

목적

오픈 소스 중 jindo.m.TextArea의 대체안으로 적합한 것이 있는지 비교 검토하여 적합한 컴포넌트를 선정에 도움을 준다.

후보

• autosize
• ExpandingTextareas
• textarea-autosize

일반 사항 비교

2015년 9월 17일 현재

\	autosize	ExpandingTextareas	textarea-autosize
IE Support	9+	8+	9+(using ievms)
Git Star	2048	234	274
Licenses	FREE	MIT	FREE OF CHARGE
size	5.6 kB	6.45 kB	1.4kB / 0.6kB
Dependency	No Dependency	jQuery	jQuery
First	Nov 6, 2011	Oct 30, 2011	Aug 5, 2012
Last	Jul 5, 2015	Jan 4, 2015	May 3, 2015

Jindo 기준 필수 요구 사항 비교

선정하는 TextArea 컴포넌트는 Jindo Component 에서 제공하는 다음의 기능을 만족해야 한다.

• 다양한 이벤트 지원 (enable/disable, focus/blur, change, expand ) (Custom Events)
• 최대 크기 지정 가능 (Max Size Set)
• 사용여부 (Enable Set)
• 증가하는 크기 조절 (Stepping Size Control)

\	autosize	ExpandingTextareas	textarea-autosize
Custom Events	update/resize/destroy	update	X
Max Size Set	O	O	O
Enable Set	O	O	O
Stepping Size Control	X	X	X

컴포넌트 별 기타 특징

autosize

• textarea.scrollHeight 값을 기준으로 text.style.height 값을 갱신하는 기본 로직
• min/max 높이 지정: min 은 row 속성, max 는 max-height 속성 변경을 통해 지정

ExpandingTextareas

• scrollHeight 가 W3C 스펙이 아니므로 브라우저 벤더마다 같은 동작을 보장하지 않을 수 있다라는 가정으로 scrollHeight 를 사용하지 않은 방법
• textarea 와 동일한 스타일 속성(hidden 속성 제외)을 가진 hidden 속성의 mirror element 를 생성하여 자동 크기 확장을 위한 가상의 element 로 사용하는 형태이다. textarea 입력변화를 이 mirror element 에 반영하면 이 element 내 컨텐트 변화에 따라 element 가 자동으로 늘어나는 방식이다.
  • http://alistapart.com/article/expanding-text-areas-made-elegant
• update callback 제공
• row 속성에 따른 min-height 적용

textarea-autosize

• autosize 와 마찬가지로 scrollHeight 방식 jQuery 로 구현되어 코드 양이 매우 적음
• 작은 CSS 요구사항이 있음

결론

현실적인 대안은 autosize

• autosize: 기존 JMC 유사 방식(scrollHeight)

  • 장: 오래된 유지 보수와 누적된 좋은 평가
  • 단: IE8 미지원

• ExpandingTextareas: 비표준인 scrollHeight 를 사용하지 않고 가상 element 생성하는 방식

  • 장: IE8 를 지원
  • 단: 가상 요소에 대한 생성 부담

• textarea-autosize: autosize 와 유사한 jquery 구현체

  • 장: 내부 로직이 구현되어 매우 크기가 작음.
  • 단: 작은 CSS 요구 사항과 이벤트 핸들러 부재가 단점(jquery 로 구현되어 성능 이슈 우려됨)