JavaScript APIs

Input

The JavaScript API for the Input component.

There are multiple input-related methods in Mod. Each method attaches event listeners for the input type and handles interaction events for the input.

Method API

// Using mod(-plus).iife.min.js
window.mod.password_input();
window.mod.number_input(options: object);
window.mod.autoresize();

// Using mod(-plus).esm.min.js
import { password_input, number_input, autoresize } from 'path/to/mod(-plus).esm.min.js';
password_input();
number_input(options: object);
autoresize();

Usage Examples

Use the following usage examples to guide your implementation.

Examples Use Global JavaScript

For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.

Password Input

Password Input HTML

<div class="mod-password-input-show-hide">
  <input type="password" class="mod-input" name="email_address" placeholder="Password" />
  <i class="mod-icon-eye"></i>
</div>

Password Input JavaScript

window.mod.password_input();

Number Input

Number Input HTML

<div class="mod-number-input">
  <button class="mod-number-input-minus">
    <i class="mod-icon-minus"></i>
  </button>
  <input class="mod-input" min="0" max="1000" placeholder="0" value="50" />
  <button class="mod-number-input-plus">
    <i class="mod-icon-plus"></i>
  </button>
</div>

Number Input JavaScript

window.mod.number_input({
  events: {
    on_change: (value = 0, input = {}) => {
      // Handle change event here...
    },
  }
});

Number Input API

options object

An object containing options for the number input.

events object

An object containing event listeners for the number input.

on_change function: A function to call whenever the number input changes. Receives the current value of the input and the input itself as parameters.

Autoresize (Textarea)

Autoresize Textarea HTML

<textarea data-default-height="100" class="mod-input mod-autoresize" placeholder="Type your message here..."></textarea>

Autoresize Textarea JavaScript

window.mod.autoresize();