TextArea 소개
TextArea 컴포넌트는 텍스트 정보를 입력하는 수단 중 하나입니다. Edit 컴포넌트는 1줄로 된 짧은 항목을 입력하는 용도로 사용한다면 TextArea 컴포넌트는 1줄 이상의 문장 형태의 정보를 입력합니다. 이메일을 작성할 때 제목 입력은 Edit 컴포넌트를 사용하고 본문은 TextArea 컴포넌트를 사용해 입력할 수 있습니다.
위의 예에서 이메일 본문 작성 시 TextArea 컴포넌트를 사용한다고 했지만, 보통은
WYSIWYG HTML Editor 또는 Rich Text Editor라는 별도 모듈을 사용합니다. TextArea 컴포넌트는 1줄 이상의 텍스트 입력 기능만 제공하고 입력된 문장을 꾸미는 기능은 지원하지 않습니다.
사용 예
웹에서 가장 흔하게 볼 수 있는 것이 댓글 입력창입니다. PC나 모바일 기기에서 짧은 의견을 남기는 기능을 제공합니다.
TextArea 만들기
1
TextArea 컴포넌트 생성하기
툴바에서 TextArea를 선택한 후, Form 위에 드래그 앤 드롭해 생성합니다.
2
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행합니다. 1줄 이상의 텍스트가 입력되는지 확인해봅니다.
자동줄넘김(wordwrap) 기능
TextArea 컴포넌트를 아무 설정 없이 화면에 배치한 경우에는 텍스트를 입력했을 때 엔터키를 입력하지 않으면 가로 스크롤바가 생기면서 한 줄로 입력됩니다. 윈도우 운영체제에 설치된 메모장 앱도 자동줄넘김 설정을 하지 않으면 한 줄로 텍스트가 입력됩니다.
예제
최초 실행 시에는 wordwrap 속성을 적용하지 않고 TextArea 컴포넌트 오른쪽에 있는 Radio 컴포넌트 선택 시 해당 속성을 적용합니다.
예제에서 사용한 핵심 기능
- wordwrap
컴포넌트의 영역을 벗어나는 입력값을 줄바꿈해서 보여줄지 지정하는 속성입니다. 'none', 'char', 'english' 속성 중 하나를 선택할 수 있습니다. 'english'를 선택하면 단어 단위로 줄바꿈을 처리하고 'char'를 선택하면 단어 단위와 상관없이 길이에 따라 줄바꿈을 처리합니다.
CJK(Chinese/Japanese/Korean) 문자는 'english', 'char' 속성값 선택에 따른 차이가 없습니다(아예 차이가 없는 것은 아닙니다. 공백 문자 처리 방식이 다르므로 'english' 속성값을 선택하는 것이 깔끔해 보일 수 있습니다).
각 속성값은 HTML Element에서 아래와 같이 처리됩니다.
HTML Element | none | char | english |
|---|---|---|---|
white-space | pre | pre-wrap | pre-wrap |
overflow-wrap | normal | break-word | break-word |
word-break | - | break-all | - |
wrap | hard | hard | hard |
웹브라우저와 속성 조합 조건에 따라 처리 방식은 조금씩 달라질 수 있습니다. 예를 들어 IE 브라우저에서는 -ms-word-break, -ms-word-wrap 속성으로 처리될 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/CSS/white-space
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
wrap 속성은 TextArea 컴포넌트에만 해당하는 처리방식입니다.
예제 구현 방법
1
화면 구성하기
TextArea, Radio 컴포넌트를 예제 화면과 같이 배치합니다. Radio 컴포넌트의 innerdataset 속성값은 아래와 같이 지정합니다. TextArea 컴포넌트의 value 속성값은 원하는 텍스트를 입력합니다. 예제에서는 Lorem ipsum 텍스트를 사용했습니다.
value 속성값을 미리 설정하지 않고 예제 실행 후 직접 문자열을 입력해 테스트할 수도 있습니다.
2
Radio 컴포넌트 이벤트 함수 작성하기
Radio 컴포넌트를 선택한 후 onitemchanged 이벤트 함수를 작성합니다. Radio 컴포넌트에서 항목 선택 시 TextArea 컴포넌트의 wordWrap 속성값으로 지정합니다.
this.radioWordwrap_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
this.textareaWordwarp.set_wordWrap(this.radioWordwrap.value);
};3
QuickView로 확인하기
QuickView(Ctrl + F6)로 실행한 후 속성값을 변경하면서 확인해봅니다. 다른 텍스트값을 TextArea 컴포넌트에 입력하고 테스트해볼 수도 있습니다.