ui-textinput

Text input as part of a larger web UI component

Installation

$ npm install ui-textinput --save-dev

Usage

const Textinput = require('ui-textinput');
const textinputOptions = {
  // Set up options here (see below)
};
 
const firstNameField = new Textinput(textInputOptions);
someContainerElement.appendChild(firstNameField.element);
firstNameField.focus();

Options

Type: {Object}

type

Type: {String}

Optional. Default: text.

Reflects the type attribute of <input> element.

As of now, there is only support for text.

width

Type: {String}

Optional. Default: 100%.

Sets the width of the input element.

tabindex

Type: {Integer}

The value of tabindex attribute to be set for the DOM element. Default: 0.

validator

Type: {Function}

A function that will be used to validate the element's current value. Any truthy value returned by the function will mean the element's value is valid. Any falsy value returned by the function will mean the element's value is NOT valid.

If omitted, all element's values are treated as valid.

When called, the function will be passed the following arguments:

• {String} val - Current element's value

onValueChange

Type: {Function | Array<Function>}

Callback function(s) that will be called every time the value of the element changes.

When called, the function will be passed the following arguments:

• {String} val - New value of the element.

onValidationStatusChange

Type: {Function | Array<Function>}

Callback function(s) that will be called every time the validation status of the element changes.

When called, the function will be passed the following arguments:

• {Boolean} isValid - New validation status.

API

Properties

element

Type: {HTMLInputElement}

Returns reference to the DOM node created by the constructor.

isValid

Type: {Boolean}

Returns the current validation status of the element.

Methods

focus()

Sets input focus on the element.

Return: {undefined}

setValue(val)

Sets the element's value.

Parameters:

• {String} val - New value

Return: {undefined}

getValue()

Gets the current value of the element.

Return: {String}

enable()

Enables the input field.

Return: {undefined}

disable()

Disables the input field.

Return: {undefined}