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

AanimationSpecifies the animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects. Use this property to control whether and how animations are applied.
AautoCapitalizeSpecifies if and in what manner user-entered text should be automatically capitalized during input or editing. This setting controls the automatic transformation of text—for example, capitalizing the first letter of each word, each sentence, or all characters—based on the selected capitalization behavior.
AautoCompleteSpecifies whether the browser is allowed to automatically fill in the value of the input control based on the user's previously entered data, such as usernames, passwords, or addresses. When enabled, this facilitates autofill and streamlines user input by suggesting or completing values according to stored information.
AautoExpandControls whether the element automatically increases its height to accommodate input that exceeds its current vertical space. When enabled, the element will expand vertically as more content is entered, preventing scrollbars from appearing.
AautoFocusSpecifies whether the input element should automatically receive focus when the page finishes loading, allowing users to start interacting with it immediately without manually clicking or tabbing into the field.
CcolsThe cols attribute sets the visible width (measured in average character columns) of a textarea input field in a form. Its value must be a positive integer, determining how many characters are visible in a single row. If the cols attribute is not provided, the textarea defaults to displaying 20 character columns in width. Note: The cols attribute is not applicable to Input elements; it is specific to Textarea elements.
DdisabledControls whether the element is active or inactive. When enabled, the element can interact with user input; when disabled, the element is unresponsive and typically appears visually distinct to indicate its inactive state.
DdisplayModeDefines the visual presentation of the characters entered within the input field, such as whether they are shown as plain text, masked (e.g., as asterisks for passwords), or styled in a particular way. This setting determines how users see their input while typing or viewing the form.
EenterKeyBehaviorSpecifies how the application responds when the "Enter" key is pressed, such as submitting a form, adding a new line, or triggering a specific action.
FformSpecifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of an existing Form element within the same HTML document. This allows input or button elements to be associated with a form, even if they are not nested inside the form tag itself.
HhintProvides supplementary helper text displayed beneath the element. This text becomes visible only when the element is focused, offering users additional guidance or context during interaction.
HhorizontalScrollBarVisibilityDetermines whether the horizontal scrollbar is visible, hidden, or displayed automatically based on the content's width.
IinputPurposeSpecifies the expected purpose of the input field and determines whether the browser (user agent) is allowed to offer automated assistance, such as autofill suggestions, when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute, enabling the browser to understand what kind of information should be entered into the field. Accepted values include 'on', 'off', or context-specific keywords such as 'name', 'email', 'organization', or 'street-address'. Setting an appropriate value improves user experience by allowing the browser to assist in accurately and efficiently filling out form fields with relevant data.
LlabelPositions the label above the input element. The label will always be visible and displayed above the input field, providing clear identification for the corresponding input regardless of user interaction or input state.
UunlockKeyDefines or retrieves the unlockKey value used to authenticate and grant access to the product's locked features. This property acts as a security credential required to unlock and utilize restricted functionality within the product.
LlocaleDefines or retrieves the current language code (e.g., "en", "fr", "es") to be used for localization. This property works together with the messages property, allowing the application to display the appropriate translations based on the selected language. When setting this value, ensure that corresponding translations exist within the messages object for consistent multilingual support.
LlocalizeFormatFunctionA callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify message content, structure, or placeholders before they are displayed to users, enabling tailored localization outputs that meet specific application or user requirements.
MmaxLengthSpecifies or retrieves the maximum number of characters allowed in the input field. If set, users cannot enter more characters than this limit.
MminLengthSpecifies or retrieves the minimum number of characters that a user is required to enter in the input field. If the user enters fewer characters than the specified minimum, the input will be considered invalid.
MmessagesDefines or retrieves an object containing key-value pairs for all user-facing strings within the widget, enabling text customization and localization. This property works in conjunction with the locale property to display translated content according to the selected language or locale. Use this to provide translated strings for different languages, ensuring your widget can support internationalization.
NnameDefines or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting an HTML form, enabling the form data to be correctly organized and transmitted to the server. This is essential for backend processing and data association.
PplaceholderSpecifies the placeholder text that appears inside the element when it is empty or no value has been entered. This text serves as a hint or example to guide users on the expected input format or content.
RreadonlyIf enabled, users will be prevented from interacting with the element. This means that all user actions, such as clicks, typing, or other input events, will be disabled for this element.
RrequiredIndicates that the user is required to enter a value in this field before the form can be submitted. If the field is left empty, the form submission will be blocked and the user will be prompted to provide a valid input. This ensures that essential information is collected before processing the form.
RresizableControls whether the user can resize the element. When enabled, a resize handle appears in the bottom-right corner of the input area, allowing the user to manually adjust its size. If disabled, the element remains a fixed size and no resize indicator is shown.
RrightToLeftSpecifies or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) languages, ensuring proper display and support for locales that use RTL fonts and text direction (such as Arabic or Hebrew).
RrowsSpecifies the number of text lines that are visible within the control at one time. This determines the vertical size of the control and how much content is displayed to the user without scrolling.
SselectAllOnFocusDetermines if the entire content of the input field will be automatically highlighted (selected) when the input gains focus, allowing users to easily replace or copy the existing text.
SselectionEndSpecifies the position (zero-based index) of the last character within the currently selected text range. This value represents the character immediately after the end of the selection; if no text is selected, it is equal to the starting index of the selection.
SselectionStartSpecifies the zero-based index position of the first character included in the current text selection. This value represents where the selection begins within the overall string or text content.
SspellCheckIndicates whether the element's text should be checked for spelling and grammar errors by the browser. When enabled, the browser will highlight possible mistakes and may provide correction suggestions to the user.
TthemeSpecifies the theme to be applied, which controls the overall appearance and styling of the element, including colors, fonts, and other visual properties.
UunfocusableWhen set to true, the element is not focusable, meaning it cannot receive focus via keyboard navigation, mouse interaction, or scripting.
VvalueProvides functionality to retrieve (get) the current value of the element or assign (set) a new value to it. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically access or modify the user's input or the element's content.
VverticalScrollBarVisibilityDetermines whether the vertical scrollbar is displayed, hidden, or automatically shown based on the content's overflow within the container. This property allows you to control how and when users can scroll vertically.
WwrapSpecifies the behavior of the control when handling long text input, determining whether the text automatically wraps onto a new line or remains on a single line, allowing for improved readability and layout management.

Events

CchangeThis event is triggered whenever the user modifies the content of the text box, such as by typing, deleting, or pasting text. It detects any change to the input’s value and can be used to respond in real-time as the user edits the text box.

Methods

FfocusSets keyboard and interaction focus to the element, making it the active target for user input and accessibility tools. This enables users to interact with the element (e.g., typing in a field or activating controls) and allows screen readers to announce its presence.
RresetThis method resets the value of the element box to its original, default state as defined upon initialization. Any user input or programmatically modified content will be cleared, returning the element box to its initial configuration.
SselectionReturns the text currently selected by the user within the active input field, textarea, or document. If no text is selected, the function returns an empty string.
SselectExtracts a specified portion of the input text based on the provided arguments, such as start and end positions or a pattern. If no arguments are given, the entire input text is selected by default. This function enables precise control over which segment of the text is retrieved or manipulated.

Properties

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

Specifies the animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects. Use this property to control whether and how animations are applied.

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"

Specifies if and in what manner user-entered text should be automatically capitalized during input or editing. This setting controls the automatic transformation of text—for example, capitalizing the first letter of each word, each sentence, or all characters—based on the selected capitalization behavior.

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"

Specifies whether the browser is allowed to automatically fill in the value of the input control based on the user's previously entered data, such as usernames, passwords, or addresses. When enabled, this facilitates autofill and streamlines user input by suggesting or completing values according to stored information.

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

Controls whether the element automatically increases its height to accommodate input that exceeds its current vertical space. When enabled, the element will expand vertically as more content is entered, preventing scrollbars from appearing.

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

Specifies whether the input element should automatically receive focus when the page finishes loading, allowing users to start interacting with it immediately without manually clicking or tabbing into the field.

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 sets the visible width (measured in average character columns) of a textarea input field in a form. Its value must be a positive integer, determining how many characters are visible in a single row. If the cols attribute is not provided, the textarea defaults to displaying 20 character columns in width. Note: The cols attribute is not applicable to Input elements; it is specific to Textarea elements.

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

Controls whether the element is active or inactive. When enabled, the element can interact with user input; when disabled, the element is unresponsive and typically appears visually distinct to indicate its inactive state.

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"

Defines the visual presentation of the characters entered within the input field, such as whether they are shown as plain text, masked (e.g., as asterisks for passwords), or styled in a particular way. This setting determines how users see their input while typing or viewing the form.

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"

Specifies how the application responds when the "Enter" key is pressed, such as submitting a form, adding a new line, or triggering a specific action.

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

Specifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of an existing Form element within the same HTML document. This allows input or button elements to be associated with a form, even if they are not nested inside the form tag itself.

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

Provides supplementary helper text displayed beneath the element. This text becomes visible only when the element is focused, offering users additional guidance or context during interaction.

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"

Determines whether the horizontal scrollbar is visible, hidden, or displayed automatically based on the content's width.

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

Specifies the expected purpose of the input field and determines whether the browser (user agent) is allowed to offer automated assistance, such as autofill suggestions, when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute, enabling the browser to understand what kind of information should be entered into the field. Accepted values include 'on', 'off', or context-specific keywords such as 'name', 'email', 'organization', or 'street-address'. Setting an appropriate value improves user experience by allowing the browser to assist in accurately and efficiently filling out form fields with relevant data.

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

Positions the label above the input element. The label will always be visible and displayed above the input field, providing clear identification for the corresponding input regardless of user interaction or input state.

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;

unlockKeystring

Defines or retrieves the unlockKey value used to authenticate and grant access to the product's locked features. This property acts as a security credential required to unlock and utilize restricted functionality within the product.

Default value

""

Example

Set the unlockKey property. 

 <smart-multiline-text-box unlock-key=''></smart-multiline-text-box>

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

 const multilinetextbox = document.querySelector('smart-multiline-text-box');
 multilinetextbox.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property. 

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

localestring

Defines or retrieves the current language code (e.g., "en", "fr", "es") to be used for localization. This property works together with the messages property, allowing the application to display the appropriate translations based on the selected language. When setting this value, ensure that corresponding translations exist within the messages object for consistent multilingual support.

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

A callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify message content, structure, or placeholders before they are displayed to users, enabling tailored localization outputs that meet specific application or user requirements.

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

Specifies or retrieves the maximum number of characters allowed in the input field. If set, users cannot enter more characters than this limit.

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

Specifies or retrieves the minimum number of characters that a user is required to enter in the input field. If the user enters fewer characters than the specified minimum, the input will be considered invalid.

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

Defines or retrieves an object containing key-value pairs for all user-facing strings within the widget, enabling text customization and localization. This property works in conjunction with the locale property to display translated content according to the selected language or locale. Use this to provide translated strings for different languages, ensuring your widget can support internationalization.

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

Defines or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting an HTML form, enabling the form data to be correctly organized and transmitted to the server. This is essential for backend processing and data association.

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

Specifies the placeholder text that appears inside the element when it is empty or no value has been entered. This text serves as a hint or example to guide users on the expected input format or content.

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, users will be prevented from interacting with the element. This means that all user actions, such as clicks, typing, or other input events, will be disabled for this 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

Indicates that the user is required to enter a value in this field before the form can be submitted. If the field is left empty, the form submission will be blocked and the user will be prompted to provide a valid input. This ensures that essential information is collected before processing the form.

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

Controls whether the user can resize the element. When enabled, a resize handle appears in the bottom-right corner of the input area, allowing the user to manually adjust its size. If disabled, the element remains a fixed size and no resize indicator is shown.

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

Specifies or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) languages, ensuring proper display and support for locales that use RTL fonts and text direction (such as Arabic or Hebrew).

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

Specifies the number of text lines that are visible within the control at one time. This determines the vertical size of the control and how much content is displayed to the user without scrolling.

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

Determines if the entire content of the input field will be automatically highlighted (selected) when the input gains focus, allowing users to easily replace or copy the existing text.

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

Specifies the position (zero-based index) of the last character within the currently selected text range. This value represents the character immediately after the end of the selection; if no text is selected, it is equal to the starting index of the 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

Specifies the zero-based index position of the first character included in the current text selection. This value represents where the selection begins within the overall string or text content.

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

Indicates whether the element's text should be checked for spelling and grammar errors by the browser. When enabled, the browser will highlight possible mistakes and may provide correction suggestions to the user.

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

Specifies the theme to be applied, which controls the overall appearance and styling of the element, including colors, fonts, and other visual properties.

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

When set to true, the element is not focusable, meaning it cannot receive focus via keyboard navigation, mouse interaction, or scripting.

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

Provides functionality to retrieve (get) the current value of the element or assign (set) a new value to it. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically access or modify the user's input or the element's content.

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"

Determines whether the vertical scrollbar is displayed, hidden, or automatically shown based on the content's overflow within the container. This property allows you to control how and when users can scroll vertically.

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"

Specifies the behavior of the control when handling long text input, determining whether the text automatically wraps onto a new line or remains on a single line, allowing for improved readability and layout management.

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 whenever the user modifies the content of the text box, such as by typing, deleting, or pasting text. It detects any change to the input’s value and can be used to respond in real-time as the user edits the text box.

  • 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

Sets keyboard and interaction focus to the element, making it the active target for user input and accessibility tools. This enables users to interact with the element (e.g., typing in a field or activating controls) and allows screen readers to announce its presence.


Invoke the focus method.

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

reset(): void

This method resets the value of the element box to its original, default state as defined upon initialization. Any user input or programmatically modified content will be cleared, returning the element box to its initial configuration.


Invoke the reset method.

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

selection( displayMode: string): string

Returns the text currently selected by the user within the active input field, textarea, or document. If no text is selected, the function returns an empty string.

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

Extracts a specified portion of the input text based on the provided arguments, such as start and end positions or a pattern. If no arguments are given, the entire input text is selected by default. This function enables precise control over which segment of the text is retrieved or manipulated.

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.