Text Enveloper

The TextEnveloper component allows you to convert text to a chunk divided by delimiter.
You can use this component for managing various word blocks.

This component consists of an input area and word block area. The word block is created when you insert text in to the input area and press the Enter key.
If you want to delete a word block, press the backspace key. If you focus out the input area, the word block is changed to minimize.

Note
This component is supported since Tizen 2.4.
It was renamed from TokenTextArea component of Tizen 2.3.

Table of Contents

  1. Default Selectors
  2. HTML Examples
  3. Manual constructor
  4. Events
  5. Methods

Default Selectors

By default, all elements with the class="ui-text-enveloper" or data-role="textenveloper" attribute are displayed as TextEnveloper component.

HTML Examples

Create simple TextEnveloper from div using class:

<div class="ui-text-enveloper"></div>

Manual constructor

To manually create a TextEnveloper component, use the component constructor from the tau namespace.

<script>
var textEnveloperElement = document.getElementById("textenveloper"),
    textEnveloper = tau.component.TextEnveloper(textEnveloperElement);
</script>

Events

Name Description
newvalue

Triggered when the user presses the ENTER key after inserting text to input tag.
added

Triggered when TextEnveloper button is added.
removed

Triggered when TextEnveloper button is removed.

Methods

To call a method on this component, see the following code:

var textEnveloperElement = document.getElementById("textenveloper"),
   textEnveloper = tau.component.TextEnveloper(textEnveloperElement);

textEnveloper.methodName(methodArgument1, methodArgument2, ...);

Summary

Method Description 
add ( string messages )

Adds message token to TextEnveloper.

 
remove ( number index )

Deletes token matched index.

 
number length (  )

Returns the number of tokens.
add

Adds message token to TextEnveloper.

add ( string messages )

This method adds new token text component button.

Parameters:

Parameter Type Required / optional Default value Description
messages string Required

Return value:

No return value

Code example:

 
<script>
var textEnveloperElement = document.getElementById("textenveloper"),
    textEnveloper = tau.component.TextEnveloper(textEnveloperElement);

textEnveloper.add("hello");
</script>
remove

Deletes the token matched index.

remove ( number index )

The remove method is used to remove a token button at the specified index position.

Parameters:

Parameter Type Required / optional Default value Description
index number Required

Return value:

No return value

Code example:

 
<script>
var textEnveloperElement = document.getElementById("textenveloper"),
    textEnveloper = tau.component.TextEnveloper(textEnveloperElement);

textEnveloper.remove(1);
</script>
length

Returns the number of tokens.

number length ( )

The length method is used to retrieve the number of tokens in the TextEnveloper component.

Return value:

Type Description
number The number of string tokens.

Code example:

 
<script>
var textEnveloperElement = document.getElementById("textenveloper"),
    textEnveloper = tau.component.TextEnveloper(textEnveloperElement),
    textTokenLength;

textEnveloper.add("hello1");
textEnveloper.add("hello2");
//textTokenLength will be 2
textTokenLength = textEnveloper.length();
</script>