Input - Documentation | www.HtmlElements.com

Overview

Smart.Input element represents a simple Auto-Complete Input.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.input.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.Input.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 #input is a smart-input tag.

      import {smartInput} from "../../source/modules/smart.input.js";
      
      Smart('#input', class {
      get properties() {
      	return {
      		value: ''
      	}
      }
      });
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      
      }
      
      Using the Smart function is optional. You can use const input = document.querySelector("#input"); and set the properties like that:
      const input = document.querySelector("#input");
      
      input.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 #input is a DIV tag.

      import {smartInput} from "../../source/modules/smart.input.js";
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      const input = new smartInput('#input', {
         	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.input.js"></script>
      </head>
      <body>
       <smart-input></smart-input>
      </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 input = document.createElement('smart-input');

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

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

Set a property:
input.propertyName = propertyValue;

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

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

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

input.addEventListener(eventName, eventHandler);

Remove Event Listener:
input.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.input.js"></script>
 <script>
 window.onload = function () {
    document.querySelector('smart-input').value = 'input New Value';
 }
 </script>
</head>
<body>
 <smart-input></smart-input>
</body>
</html>