TextBox - Documentation | www.HtmlElements.com

Overview

Smart.TextBox element represents single row editable text box, supported two different display modes.

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.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 - this file defines the functionality of the smartDropDownList used as a drop down.
    • smart.combobox.js - this file defines the base class for the smartTextBox
    • smart.textbox.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-text-box tag.

      import {smartTextBox} from "../../source/modules/smart.textbox.js";
      
      Smart('#textbox', class {
      get properties() {
      	return {
      		value: ''
      	}
      }
      });
      
      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.value = '';
      

    • 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 {smartTextBox} from "../../source/modules/smart.textbox.js";
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      const textbox = new smartTextBox('#textbox', {
         	value: ''
      });
      }
      
    • Load scripts

      The following code adds the custom element to the page.

      <!DOCTYPE html>
      <html>
      <head>
       <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
      cript 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.combobox.js"></script>
       <script type="text/javascript" src="../../source/smart.textbox.js"></script>
      </head>
      <body>
       <smart-text-box></smart-text-box>
      </body>
      </html>
      

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

      Demo

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


Create a new element:
const textbox = document.createElement('smart-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);

Appearance

If the user wants to change the content of the text box, this can be accomplished by setting the value property of the element, like so:

<!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>
 window.onload = function () {
    document.querySelector('smart-text-box').value = 'Text Box New Value';
 }
 </script>
</head>
<body>
 <smart-text-box>Check Box</smart-text-box>
</body>
</html>

Demo

Behavior

smart-text-box has two display modes:

  • default - the element behaves like a regular input
  • escaped - the element behaves like an input, but all special characters are escaped

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

<!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>
</head>
<body>
 <smart-text-box display-mode="escaped"></smart-text-box>
</body>
</html>

Demo

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>
 window.onload = function () {
    document.querySelector('smart-text-box').displayMode = 'escaped';
 }
 </script>
</head>
<body>
 <smart-text-box></smart-text-box>
</body>
</html>

Demo

In displayMode:default the element could have autocomplete functionality - drop down with suggestions, based on the current user input. The drop down with options is based in the values in element's dataSource. Autocomplete options are:

  • none - autocomplete option is disabled
  • manual - the character string the user has typed will become the value of the textbox unless the user selects a value in the popup
  • auto - the automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox
  • inline - the inline completion string is visually highlighted and has a selected state

In addition the user can set new value about minLength. By default it's 2. minLength sets the minimum number of characters that the user have to enter to trigger the autocomplete popup.

 <smart-text-box data-source='["item 1", "item 2"]' autocomplete="manual" min-length="1"></smart-text-box>