Introducing TextArea
The TextArea component is one of the means for entering text information. If the Edit component is used to input short items of 1 line, then the TextArea component inputs information in the form of sentences of more than 1 line. When writing an email, the subject can be entered using the Edit component and the body can be entered using the TextArea component.
In the example above, it was said that the TextArea component is used to create the email body, but usually, a separate module called WYSIWYG HTML Editor or Rich Text Editor is used. The TextArea component only provides the text input function for more than 1 line but does not support the function to decorate the input sentence.
Example
The comment input window is what is seen the most commonly on the web. It provides the function to leave short comments on the PC or mobile device.
Creating TextArea
1
Creating TextArea Component
Select TextArea from the toolbar, drag and drop it onto the form to create it.
2
Checking with QuickView
Run it with QuickView (Ctrl + F6). Check to see if more than 1 line of text is entered.
Automatic Line Break (wordwrap) Function
If the TextArea component is placed on the screen without any settings, and the enter key is not pressed when text is entered, then a horizontal scrollbar appears and the text is entered in one line. The Notepad app installed on the Windows operating system will also enter text in one line unless the automatic line break is set.
Example
At first execution, the wordwrap property is not applied. The property is applied when the Radio component on the right side of the TextArea component is selected.
Core features used in the example
- wordwrap
This is the property that specifies whether to show the input value outside the component area with the line break. You can select one of the 'none', 'char', 'english' properties. Select 'english' to process line breaks by word, and 'char' to process line breaks according to the length, regardless of the word unit.
CJK (Chinese/Japanese/Korean) characters have no difference according to the selection of the property values of 'english' and 'char' (This does not mean that there is any difference at all. It will look neat to select the 'english' property value as blank characters are processed differently).
Each property value is processed as follows in HTML Element (for browsers that support CSS3, HTML).
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 |
The processing method may be slightly different depending on the web browser and the conditions of combination of properties. For example, in IE browsers, it can be processed as the -ms-word-break, -ms-word-wrap properties.
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
The wrap property is the processing method that is only applicable to the TextArea component.
How to implement an example
1
Configuring Form Screen
Place the TextArea, Radio components as shown in the example screen. Specify the innerdataset property value of the Radio component as follows. For the value property value of the TextArea component, enter the desired text. In the example, the Lorem ipsum text was used.
You can also test by entering the string directly after running the example without setting the value property value in advance.
2
Writing Radio Component Event Function
Select the Radio component and create the onitemchanged event function. When selecting the item in the Radio component, specify it as the wordWrap property value of the TextArea component.
this.radioWordwrap_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
this.textareaWordwarp.set_wordWrap(this.radioWordwrap.value);
};3
Checking with QuickView
Run it with QuickView (Ctrl + F6) and check while changing the property value. You can also test and enter different text values into the TextArea component.