Do you like this project? Please support my Mecha CMS project too. Thank you!

Number Picker 1.0.5

Accessible custom <input type="number"> element.

Use ArrowUp key to increase the number and ArrowDown key to decrease it. You can also use your mouse wheel for this.

Usage

Browser

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="./index.min.css" rel="stylesheet">
    <style>
      .number-picker {
        min-width: 3em;
      }
    </style>
  </head>
  <body>
    <p>
      <input type="number">
    </p>
    <script src="./index.min.js"></script>
    <script>
      const picker = new NumberPicker(document.querySelector('input'));
    </script>
  </body>
</html>

Node.js

Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn’t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.

CommonJS

const NumberPicker = require('@taufik-nurrohman/number-picker').default;

const picker = new NumberPicker(document.querySelector('input'));

ECMAScript

import NumberPicker from '@taufik-nurrohman/number-picker';

const picker = new NumberPicker(document.querySelector('input'));

Tests

Constructors

NumberPicker(self, state)

const picker = new NumberPicker(self, strict = false);
const picker = new NumberPicker(self, state = {
    max: Infinity,
    min: -Infinity,
    step: 1,
    strict: false,
    time: {
        error: 1000,
        repeat: [500, 50]
    },
    with: []
});

Parameters

self

The <input> element.

strict

If its value is set to true, any invalid input will be rejected immediately. Increasing the number will automatically stop at the maximum number, and decreasing the number will automatically stop at the minimum number.

state

The configuration data.

state.max

Determines the maximum valid number value, with the default value follows what the max attribute value of the <input> element. If no max attribute exists or if its value is not a number, it will default to Infinity.

const picker = new NumberPicker(document.querySelector('input'), {
    max: 25
});

state.min

Determines the minimum valid number value, with the default value follows what the min attribute value of the <input> element. If no min attribute exists or if its value is not a number, it will default to -Infinity.

const picker = new NumberPicker(document.querySelector('input'), {
    min: 5
});

state.step

Determines how much the number will increase or decrease with each step, with the default value follows what the step attribute value of the <input> element. If no step attribute exists or if its value is not a number, it will default to 1.

const picker = new NumberPicker(document.querySelector('input'), {
    step: 0.25
});

state.strict

If its value is set to true, any invalid input will be rejected immediately. Increasing the number will automatically stop at the maximum number, and decreasing the number will automatically stop at the minimum number.

const picker = new NumberPicker(document.querySelector('input'), {
    strict: true
});

state.time

Stores configuration data related to time in milliseconds.

state.time.error

Determines how long the invalid state is presented to the user. If the value is less than or equal to 0, the built-in invalid state will be disabled.

const picker = new NumberPicker(document.querySelector('input'), {
    time: {
        error: 999999999 // As long as possible
    }
});
const picker = new NumberPicker(document.querySelector('input'), {
    time: {
        error: 0 // Disable the built-in invalid state
    }
});
state.time.repeat

It contains an array that determines how long the step button must be held down before the increase/decrease action starts to repeat.

const picker = new NumberPicker(document.querySelector('input'), {
    time: {
        repeat: [
            // Start the repeat by holding down the step button for one second
            1000,
            // Repeat every 1 second
            1000
        ]
    }
});

state.with

List of callable functions or objects containing an attach() method to be invoked each time the application is initialized. A very simple “plugin” system.

Methods

Instance Methods

Instance methods are methods available through the results of an NumberPicker construct.

picker.attach(self, state)

Re-initializes the application and its extensions after it has been detached.

picker.attach();

picker.blur()

Blurs from the number picker’s input.

picker.blur();

picker.detach()

Removes the application view and executes the detach() method of the extensions, if they are present.

picker.detach();

picker.fire(event, data, that)

Fires an event.

picker.fire('change', []);

picker.focus(mode = true)

Focuses to the number picker’s input.

picker.focus(); // Focus and select the text
picker.focus(-1); // Focus and put the caret to the start of the text
picker.focus(+1); // Focus and put the caret to the end of the text

picker.off(event, task)

Removes an event.

picker.off('change'); // Remove all events from the `change` event container
picker.off('change', onChange); // Remove `onChange` event from the `change` event container

picker.on(event, task)

Adds a new event.

picker.on('change', function () {
    console.log(this.value);
});
function onChange() {
    console.log(this.value);
}

picker.on('change', onChange);

picker.reset(focus, mode = true)

Resets the number picker’s value to its initial value.

picker.reset(); // Reset the number picker’s value
picker.reset(true); // Reset the number picker’s value and focus to the number picker’s input

Static Methods

Static methods are methods available directly on the NumberPicker object.

NumberPicker.from(self, state)

Creates a new NumberPicker instance.

const picker = NumberPicker.from(document.querySelector('input'));

NumberPicker.of(self)

Gets NumberPicker instance of an element.

document.querySelectorAll('input').forEach(self => {
    const picker = NumberPicker.of(self);
});

Properties

Instance Properties

Instance properties are properties available through the results of an NumberPicker construct.

picker.active

Gets or sets the active state of the number picker. By setting the value to false or true, the disabled state of the source element will also be set automatically.

picker.active = false; // // Make the number picker “disabled”
picker.active = true; // // Make the number picker “enabled”

picker.fix

Gets or sets the read-only state of the number picker. By setting the value to false or true, the read-only state of the source element will also be set automatically.

picker.fix = true; // Make the number picker “read-only”

picker.hooks

Returns the events data.

console.log(picker.hooks);

picker.mask

Returns the number picker’s mask.

picker.mask.classList.add(picker.state.n + '--dark');

picker.max

Proxy that passes to the picker.state.max property, with additional actions that are executed while the value is being set.

console.log(picker.max); // Returns the `picker.state.max` value
picker.max = 5; // Set the maximum valid number to `5`

picker.min

Proxy that passes to the picker.state.min property, with additional actions that are executed while the value is being set.

console.log(picker.min); // Returns the `picker.state.min` value
picker.min = 5; // Set the minimum valid number to `5`

picker.self

Returns the <input> element.

console.log(picker.self.getAttribute('name'));

picker.state

Returns the application states if any.

console.log(picker.state);

picker.text

Gets or sets the current text of the number picker’s input.

console.log(picker.text);
picker.text = '5';

picker.value

Proxy that passes to the picker.self.value property, with additional actions that are executed while the value is being set.

console.log(picker.value);
picker.on('change', function () {
    console.log(this.value);
});

picker.value = '5';

picker.vital

Gets or sets the required state of the number picker. By setting the value to false or true, the required state of the source element will also be set automatically.

picker.vital = true; // Make the number picker “required”

Static Properties

Static properties are properties available directly on the NumberPicker object.

NumberPicker._

Alias for NumberPicker.prototype.

NumberPicker._.clear = function () {
    return (this.value = ""), this;
};

const picker = new NumberPicker(document.querySelector('input'));

picker.clear(); // Clear value

NumberPicker.state

Returns the default values of picker.state.

const picker = new NumberPicker(document.querySelector('input'), {
    foo: 'bar'
});

console.log([NumberPicker.state, picker.state]);

NumberPicker.version

Returns the application version.

Extensions

Anatomy of an Extension

Extension as a function:

function Extension(self, state = {}) {
    this.test = 1;
    return this;
}

Object.defineProperty(Extension, 'name', {
    value: 'Extension'
});

Extension as an object:

const Extension = {
    attach: function (self, state = {}) {
        this.test = 1;
        return this;
    },
    detach: function (self, state = {}) {
        delete this.test;
        return this;
    },
    name: 'Extension'
};

Usage of an Extension

As a core extension:

NumberPicker.state.with.push(Extension);

As an optional extension:

const picker = new NumberPicker(document.querySelector('input'), {
    with: [Extension]
});

List of Extensions

License

This project is licensed under the terms of the MIT license. If this project has saved you time, please donate. Thank you! ❤️