Overview

Smart.MultilineTextBox element represents multi row editable text box, supported two different display modes. The element also inherits the properties of a standard Textarea.

To initialize a multiline text box element the user has to include the following files to the head of the page:

  • smart.base.css - the CSS file containing the styles for element
  • smart.element.js - the base class
  • smart.button.js - the JS file containing the definition for the buttons inside the Scroll Bars. Required for smart-text-box.
  • smart.listbox.js - the JS file containing the definition for the listBox in the drop down list popup. Required for smart-text-box.
  • smart.dropdownlist.js - the JS file containing the definition for drop down list popup. Required for smart-text-box.
  • smart.textbox.js - the JS file containing the base class about all text box elements
  • smart.scrollbar.js - the JS file containing the definition for the vertical and horizontal scrollbars
  • smart.multilinetextbox.js - the JS file containing the element definition

The following code adds a multiline text box to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.textbox.js"></script> <script type="text/javascript" src="../../source/smart.multilinetextbox.js"></script> </head> <body> <smart-multiline-text-box></smart-multiline-text-box> </body> </html>

Demo

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Appearance

The Multiline Text Box could be filled with value via the value property

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smartbutton.js"></script> <script type="text/javascript" src="../../source/smartscrollbar.js"></script> <script type="text/javascript" src="../../source/smartlistbox.js"></script> <script type="text/javascript" src="../../source/smartdropdownlist.js"></script> <script type="text/javascript" src="../../source/smarttextbox.js"></script> <script type="text/javascript" src="../../source/smartmultilinetextbox.js"></script> <script> window.onload = function () { document.querySelector('smart-multiline-text-box').value = 'Multiline Text Box New Value'; } </script> </head> <body> <smart-multiline-text-box></smart-multiline-text-box> </body> </html>

Demo

Element's content could be set also on initialization if plain text is wrapped between it's open and closing tag.

 <smart-multiline-text-box>Multiline Text Box Value</smart-multiline-text-box>

Demo

The appearance of scrollbars could be controlled via allowHorizontalScrollbar and allowVerticalScrollbar properties.

 <smart-multiline-text-box allow-vertical-scrollbar></smart-multiline-text-box>

Demo

The Multiline Text Box could be resized via small icon in the bottom right corner when resizable is set to true.

 <smart-multiline-text-box resizable>Multiline Text Box</smart-multiline-text-box>

Demo

Behavior

The element offers two display modes:

  • default
  • escaped

In default display mode Smart.MultilineTextBox behaves like a standard textarea.In escaped mode special characters are escaped.

Here's how to set a new displayMode on element initialiation:

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

And here's how to change it via javascript after the element has been initialized:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smartbutton.js"></script> <script type="text/javascript" src="../../source/smartscrollbar.js"></script> <script type="text/javascript" src="../../source/smartlistbox.js"></script> <script type="text/javascript" src="../../source/smartdropdownlist.js"></script> <script type="text/javascript" src="../../source/smarttextbox.js"></script> <script type="text/javascript" src="../../source/smartmultilinetextbox.js"></script> <script> window.onload = function () { document.querySelector('smart-multiline-text-box').displayMode = 'escaped'; } </script> </head> <body> <smart-multiline-text-box></smart-multiline-text-box> </body> </html>

Keyboard Support

Smart.MultilineTextBox keyboard navigation is similar to the navigation in standard textarea. In escaped display mode the navigation via keyboard arrows moves the carret on left or right if it's in "escaped" symbol. The element is focusable and can be focused using the Tab button.

Styling

Smart.MultilineTextBox uses the following CSS variables for styling:

  • --smart-multiline-text-box-default-width: used to set the width of the element. Default value is 400px.
  • --smart-multiline-text-box-default-height: used to set the height of the element. Default value is 200px.
  • --smart-multiline-text-box-scroll-bar-size: used to set the size of the scroll buttons. Default value is 12px.