Overview

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

To initialize a 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
  • 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 element definition

The following code adds a 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> </head> <body> <smart-text-box></smart-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

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.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> 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.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> </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.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> 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>