MultilineTextBox JAVASCRIPT UI Component API

MultilineTextBox Javascript API

Class

MultilineTextBox

MultilineTextBox

Defines a multi-line text input control. MultilineTextBox can hold an unlimited number of characters, and the text renders in a fixed-width font

Selector

smart-multiline-text-box

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AautoCapitalizeDetermines whether and how the value should be automatically capitalized as it is entered/edited by the user.
AautoCompleteDetermines whether the value of the control can be automatically completed by the browser.
AautoExpandDetermines whether element will auto expand when the input overflows vertically.
AautoFocusDetermines whether the input should be focused when the page is loaded.
CcolsThe cols attribute specifies the visible width of a input. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
DdisabledEnables or disables the element.
DdisplayModeSpecifies how the characters are displayed inside the input.
EenterKeyBehaviorDetermines the behavior on "Enter" key.
FformThe form element that the element is associated with (its "form owner"). The value of the attribute must be the ID of a form element in the same document.
HhintSets additional helper text below the element. Appears only when the element is focused.
HhorizontalScrollBarVisibilityControls horizontal scrollbar's visibility.
IinputPurposeSets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
LlabelSets label above the element. The label is displayed above the input and it's always visible.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmaxLengthSets or gets the maximum number of characters that the user can enter.
MminLengthSets or gets the minimum number of characters that the user can enter.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
NnameSets or gets the name attribute for the element. Name is used when submiting HTML forms.
PplaceholderThe placeholder text that is displayed when no value is applied to the element.
RreadonlyIf enabled the users cannot iteract with the element.
RrequiredSpecifies that the user must fill in a value before submitting a form that contains the element.
RresizableEnables/ disables the resizing of the element. If enabled a resizing indicator appears in the bottom corner of the input area.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
RrowsThe number of visible text lines for the control.
SselectAllOnFocusSpecifies whether the content of the input will be selected on focus.
SselectionEndIndicates the index of the last character in the current selection.
SselectionStartIndicates the index to the first character in the current selection.
SspellCheckSpecifies whether the element is to have its spelling and grammar checked or not.
TthemeDetermines the theme. Theme defines the look of the element
UunfocusableIf is set to true, the element cannot be focused.
VvalueSets or gets the value of the element.
VverticalScrollBarVisibilityControls vertical scrollbar's visibility.
WwrapIndicates how the control wraps text.

Events

CchangeThis event is triggered when the value of the text box is changed.

Methods

FfocusFocuses the element.
RresetThe method is used to reset the value of the element box to it's initial state.
SselectionReturns the currenctly selected text.
SselectSelects a certain part of the input text. If no arguments are specified the whole text will be selected.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-multiline-text-box animation='none'></smart-multiline-text-box>

Set the animation property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.animation = 'simple';

Get the animation property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let animation = multilinetextbox.animation;

autoCapitalize"none" | "characters" | "words"

Determines whether and how the value should be automatically capitalized as it is entered/edited by the user.

Allowed Values

  • "none" - Does not capitalize the input.
  • "characters" - Capitalizes every character that is entered.
  • "words" - Capitalizes only the first letter of every new words that is entered.

Default value

"none"

Example

Set the autoCapitalize property. 

 <smart-multiline-text-box auto-capitalize='words'></smart-multiline-text-box>

Set the autoCapitalize property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.autoCapitalize = 'characters';

Get the autoCapitalize property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let autoCapitalize = multilinetextbox.autoCapitalize;

autoComplete"on" | "off"

Determines whether the value of the control can be automatically completed by the browser.

Allowed Values

  • "on" - Enables the browser's autoComplete functionality.
  • "off" - Disables the browser's autoComplete functionality.

Default value

"off"

Example

Set the autoComplete property. 

 <smart-multiline-text-box auto-complete='on'></smart-multiline-text-box>

Set the autoComplete property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.autoComplete = 'off';

Get the autoComplete property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let autoComplete = multilinetextbox.autoComplete;

autoExpandboolean

Determines whether element will auto expand when the input overflows vertically.

Default value

false

Example

Set the autoExpand property. 

 <smart-multiline-text-box auto-expand></smart-multiline-text-box>

Set the autoExpand property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.autoExpand = false;

Get the autoExpand property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let autoExpand = multilinetextbox.autoExpand;

autoFocusboolean

Determines whether the input should be focused when the page is loaded.

Default value

false
Try a demo showcasing the autoFocus property.

Example

Set the autoFocus property. 

 <smart-multiline-text-box auto-focus></smart-multiline-text-box>

Set the autoFocus property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.autoFocus = false;

Get the autoFocus property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let autoFocus = multilinetextbox.autoFocus;

colsnumber

The cols attribute specifies the visible width of a input. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.

Default value

20

Example

Set the cols property. 

 <smart-multiline-text-box cols='40'></smart-multiline-text-box>

Set the cols property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.cols = 60;

Get the cols property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let cols = multilinetextbox.cols;

disabledboolean

Enables or disables the element.

Default value

false
Try a demo showcasing the disabled property.

Example

Set the disabled property. 

 <smart-multiline-text-box disabled></smart-multiline-text-box>

Set the disabled property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.disabled = false;

Get the disabled property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let disabled = multilinetextbox.disabled;

displayMode"default" | "escaped"

Specifies how the characters are displayed inside the input.

Allowed Values

  • "default" - The special characters of the input are not being escaped.
  • "escaped" - The special characters of the input are being escaped by replacing them with their corresponding codes.

Default value

"default"
Try a demo showcasing the displayMode property.

Example

Set the displayMode property. 

 <smart-multiline-text-box display-mode='escaped'></smart-multiline-text-box>

Set the displayMode property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.displayMode = 'default';

Get the displayMode property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let displayMode = multilinetextbox.displayMode;

enterKeyBehavior"clearOnSubmit" | "newLine" | "submit"

Determines the behavior on "Enter" key.

Allowed Values

  • "clearOnSubmit" - Pressing "Enter" key fires change event with the curent value and the input gets cleared.
  • "newLine" - Pressing "Enter" key just adds a new line character to the input.
  • "submit" - Pressing "Enter" key fires change event with the curent value. The default mode.

Default value

"newLine"
Try a demo showcasing the enterKeyBehavior property.

Example

Set the enterKeyBehavior property. 

 <smart-multiline-text-box enter-key-behavior='submit'></smart-multiline-text-box>

Set the enterKeyBehavior property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.enterKeyBehavior = 'clearOnSubmit';

Get the enterKeyBehavior property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let enterKeyBehavior = multilinetextbox.enterKeyBehavior;

formstring

The form element that the element is associated with (its "form owner"). The value of the attribute must be the ID of a form element in the same document.

Default value

""

Example

Set the form property. 

 <smart-multiline-text-box form='form1'></smart-multiline-text-box>

Set the form property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.form = 'form2';

Get the form property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let form = multilinetextbox.form;

hintany

Sets additional helper text below the element. Appears only when the element is focused.

Example

Set the hint property. 

 <smart-multiline-text-box hint='Helper text'></smart-multiline-text-box>

Set the hint property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.hint = Hint;

Get the hint property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let hint = multilinetextbox.hint;

horizontalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Controls horizontal scrollbar's visibility.

Allowed Values

  • "auto" - The element automatically determines whether or not the horizontal Scroll bar should be visible or not.
  • "disabled" - Disables the horizontal Scroll bar.
  • "hidden" - Hides the horizontal Scroll bar.
  • "visible" - Shows the horizontal Scroll bar even if not necessary.

Default value

"auto"
Try a demo showcasing the horizontalScrollBarVisibility property.

Example

Set the horizontalScrollBarVisibility property. 

 <smart-multiline-text-box horizontal-scroll-bar-visibility='disabled'></smart-multiline-text-box>

Set the horizontalScrollBarVisibility property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.horizontalScrollBarVisibility = 'hidden';

Get the horizontalScrollBarVisibility property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let horizontalScrollBarVisibility = multilinetextbox.horizontalScrollBarVisibility;

inputPurposestring

Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.

Default value

"off"

Example

Set the inputPurpose property. 

 <smart-multiline-text-box input-purpose='on'></smart-multiline-text-box>

Set the inputPurpose property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.inputPurpose = 'country';

Get the inputPurpose property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let inputPurpose = multilinetextbox.inputPurpose;

labelstring

Sets label above the element. The label is displayed above the input and it's always visible.

Default value

""

Example

Set the label property. 

 <smart-multiline-text-box label='Label text'></smart-multiline-text-box>

Set the label property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.label = 'Label';

Get the label property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let label = multilinetextbox.label;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property. 

 <smart-multiline-text-box locale='de'></smart-multiline-text-box>

Set the locale property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.locale = 'fr';

Get the locale property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let locale = multilinetextbox.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property. 

 <smart-multiline-text-box localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-multiline-text-box>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let localizeFormatFunction = multilinetextbox.localizeFormatFunction;

maxLengthnumber

Sets or gets the maximum number of characters that the user can enter.

Example

Set the maxLength property. 

 <smart-multiline-text-box max-length='120'></smart-multiline-text-box>

Set the maxLength property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.maxLength = 150;

Get the maxLength property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let maxLength = multilinetextbox.maxLength;

minLengthnumber

Sets or gets the minimum number of characters that the user can enter.

Default value

0

Example

Set the minLength property. 

 <smart-multiline-text-box min-length='20'></smart-multiline-text-box>

Set the minLength property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.minLength = 50;

Get the minLength property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let minLength = multilinetextbox.minLength;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Example

Set the messages property. 

 <smart-multiline-text-box messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}'></smart-multiline-text-box>

Set the messages property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Get the messages property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let messages = multilinetextbox.messages;

namestring

Sets or gets the name attribute for the element. Name is used when submiting HTML forms.

Default value

""

Example

Set the name property. 

 <smart-multiline-text-box name='TextArea'></smart-multiline-text-box>

Set the name property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.name = 'textarea';

Get the name property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let name = multilinetextbox.name;

placeholderstring

The placeholder text that is displayed when no value is applied to the element.

Default value

""
Try a demo showcasing the placeholder property.

Example

Set the placeholder property. 

 <smart-multiline-text-box placeholder='Placeholder'></smart-multiline-text-box>

Set the placeholder property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.placeholder = 'PlaceHolder';

Get the placeholder property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let placeholder = multilinetextbox.placeholder;

readonlyboolean

If enabled the users cannot iteract with the element.

Default value

false

Example

Set the readonly property. 

 <smart-multiline-text-box readonly></smart-multiline-text-box>

Set the readonly property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.readonly = true;

Get the readonly property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let readonly = multilinetextbox.readonly;

requiredboolean

Specifies that the user must fill in a value before submitting a form that contains the element.

Default value

false

Example

Set the required property. 

 <smart-multiline-text-box required></smart-multiline-text-box>

Set the required property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.required = false;

Get the required property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let required = multilinetextbox.required;

resizableboolean

Enables/ disables the resizing of the element. If enabled a resizing indicator appears in the bottom corner of the input area.

Default value

false
Try a demo showcasing the resizable property.

Example

Set the resizable property. 

 <smart-multiline-text-box resizable></smart-multiline-text-box>

Set the resizable property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.resizable = false;

Get the resizable property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let resizable = multilinetextbox.resizable;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-multiline-text-box right-to-left></smart-multiline-text-box>

Set the rightToLeft property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.rightToLeft = false;

Get the rightToLeft property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let rightToLeft = multilinetextbox.rightToLeft;

rowsnumber

The number of visible text lines for the control.

Default value

5

Example

Set the rows property. 

 <smart-multiline-text-box rows='40'></smart-multiline-text-box>

Set the rows property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.rows = 60;

Get the rows property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let rows = multilinetextbox.rows;

selectAllOnFocusboolean

Specifies whether the content of the input will be selected on focus.

Default value

false
Try a demo showcasing the selectAllOnFocus property.

Example

Set the selectAllOnFocus property. 

 <smart-multiline-text-box select-all-on-focus></smart-multiline-text-box>

Set the selectAllOnFocus property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.selectAllOnFocus = false;

Get the selectAllOnFocus property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let selectAllOnFocus = multilinetextbox.selectAllOnFocus;

selectionEndnumber

Indicates the index of the last character in the current selection.

Default value

0

Example

Set the selectionEnd property. 

 <smart-multiline-text-box selection-end='40'></smart-multiline-text-box>

Set the selectionEnd property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.selectionEnd = 60;

Get the selectionEnd property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let selectionEnd = multilinetextbox.selectionEnd;

selectionStartnumber

Indicates the index to the first character in the current selection.

Default value

0

Example

Set the selectionStart property. 

 <smart-multiline-text-box selection-start='40'></smart-multiline-text-box>

Set the selectionStart property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.selectionStart = 60;

Get the selectionStart property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let selectionStart = multilinetextbox.selectionStart;

spellCheckboolean

Specifies whether the element is to have its spelling and grammar checked or not.

Default value

false

Example

Set the spellCheck property. 

 <smart-multiline-text-box spell-check></smart-multiline-text-box>

Set the spellCheck property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.spellCheck = false;

Get the spellCheck property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let spellCheck = multilinetextbox.spellCheck;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property. 

 <smart-multiline-text-box theme='blue'></smart-multiline-text-box>

Set the theme property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.theme = 'red';

Get the theme property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let theme = multilinetextbox.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-multiline-text-box unfocusable></smart-multiline-text-box>

Set the unfocusable property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.unfocusable = false;

Get the unfocusable property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let unfocusable = multilinetextbox.unfocusable;

valuestring

Sets or gets the value of the element.

Default value

""

Example

Set the value property. 

 <smart-multiline-text-box value='Demo value.'></smart-multiline-text-box>

Set the value property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.value = 'New demo value.';

Get the value property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let value = multilinetextbox.value;

verticalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Controls vertical scrollbar's visibility.

Allowed Values

  • "auto" - The element automatically determines whether or not the horizontal Scroll bar should be visible or not.
  • "disabled" - Disables the horizontal Scroll bar.
  • "hidden" - Hides the horizontal Scroll bar.
  • "visible" - Shows the horizontal Scroll bar even if not necessary.

Default value

"auto"
Try a demo showcasing the verticalScrollBarVisibility property.

Example

Set the verticalScrollBarVisibility property. 

 <smart-multiline-text-box vertical-scroll-bar-visibility='disabled'></smart-multiline-text-box>

Set the verticalScrollBarVisibility property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.verticalScrollBarVisibility = 'hidden';

Get the verticalScrollBarVisibility property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let verticalScrollBarVisibility = multilinetextbox.verticalScrollBarVisibility;

wrap"hard" | "soft" | "off"

Indicates how the control wraps text.

Allowed Values

  • "hard" - The text in the input is wrapped (contains newlines) when submitted in a form. The cols attribute must be specified.
  • "soft" - The text in the injput is not wrapped when submitted in a form. This is default
  • "off" - The text inside the input is not being wrapped to a new line when submitted in a form.

Default value

"soft"

Example

Set the wrap property. 

 <smart-multiline-text-box wrap='hard'></smart-multiline-text-box>

Set the wrap property by using the HTML Element's instance. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.wrap = 'soft';

Get the wrap property. 

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 let wrap = multilinetextbox.wrap;

Events

changeCustomEvent

This event is triggered when the value of the text box is changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The previous value of the element before it was changed.
ev.detail.value - The new value of the element.
ev.detail.type - Indicates when the element was called, e.g. on blur or submit.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event. 

const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value,
        type = detail.type;

	// event handling code goes here.
})

Methods

focus(): void

Focuses the element.


Invoke the focus method.

const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.focus();

reset(): void

The method is used to reset the value of the element box to it's initial state.


Invoke the reset method.

const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.reset();

selection( displayMode: string): string

Returns the currenctly selected text.

Arguments

displayModestring

If displayMode is set to 'escaped', the value returned from the method contains escaped special characters.

Returnsstring

Invoke the selection method.

const multilinetextbox = document.querySelector('smart-multiline-text-box');
const result = multilinetextbox.selection("escaped");

select( rangeFrom?: any, rangeTo?: any): void

Selects a certain part of the input text. If no arguments are specified the whole text will be selected.

Arguments

rangeFrom?any

Determines the start index of the text selection.

rangeTo?any

Determines the end index of the text selection.


Invoke the select method.

const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.select("0, 3");

CSS Variables

--smart-multiline-text-box-default-widthvar()

Default value

"var(--smart-editor-width)"

Default width of the element.

--smart-multiline-text-box-default-heightvar()

Default value

"calc(10 * var(--smart-editor-height))"

Default height of the element.