MultilineTextBox - Documentation | www.HtmlElements.com

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.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.textbox.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class
    • smart.button.js - the JS file containing the definition for the buttons inside the Scroll Bars
    • smart.scrollbar.js - the JS file containing the definition for the ScrollBars of the listBox popup.
    • smart.listbox.js - the JS file containing the definition for the listBox in the drop down list popup.
    • smart.dropdownlist.js - the JS file containing the definition for drop down list popup.
    • smart.textbox.js - the JS file containing the textbox element definition
    • smart.multilinetextbox.js - the JS file containing the element definition

    Usage

    • Import a module

      With this approach, we import a module and create the web component by using the Smart function. The #textbox is a smart-multiline-textbox tag.

      import {smartMultilineTextBox} from "../../source/modules/smart.textbox.js";
      
      Smart('#textbox', class {
      get properties() {
      	return {
      		displayMode: 'escaped'
      	}
      }
      });
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      
      }
      
      Using the Smart function is optional. You can use const textbox = document.querySelector("#textbox"); and set the properties like that:
      const textbox = document.querySelector("#textbox");
      
      textbox.displayMode = 'escaped';
      

    • Import a module, Init on Demand

      The following imports the web component's module and creates it on demand, when the document is ready. The #textbox is a DIV tag.

      import {smartMultilineTextBox} from "../../source/modules/smart.textbox.js";
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      const textBox = new smartMultilineTextBox('#textbox', {
           displayMode: 'escaped'
      });
      }
      
    • Load scripts

      The following code adds the custom element to the page.

      <!DOCTYPE html>
      <html lang="en">
      <head>
       <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
       <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>
      

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

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const textbox = document.createElement('smart-multiline-text-box');

Append it to the DOM:
document.body.appendChild(textbox);

Remove it from the DOM:
textbox.parentNode.removeChild(textbox);

Set a property:
textbox.propertyName = propertyValue;

Get a property value:
const propertyValue = textbox.propertyName;

Invoke a method:
textbox.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

textbox.addEventListener(eventName, eventHandler);

Remove Event Listener:
textbox.removeEventListener(eventName, eventHandler, true);

Demo

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.default.css" type="text/css" />
 <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.default.css" type="text/css" />
 <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>
 <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>