Пишите свои предложения по доработке плагина
Вы можете скачать NumberPlugin по прямой ссылке

Здесь может быть ваша реклама

Последние обновления

v1.13Добавление стилей кнопок +/-

v1.12Новая функция добавления инпуту своего дополнительного класса

v1.11Добавлена минифицированная версия плагина

v1.10Мелкие исправления и улучшения

v1.09Добавлена функция ограничения минимального и максимального значения

v1.08Добавлена функция анимации Добавлена функция задержки анимации

v1.07Добавлена команда для включения отрицательных чисел
Добавлена команда установки шага
Исправлен баг для ввода чисел с клавиатуры

v1.06Теперь нельзя в поле вводить символы

v1.05Добавлено редактирование с помощью клавиатуры

v1.04Устранён баг с двойным запуском плагина на одной странице

NumberPlugin это плагин для стилизации input type=number


Не стилизованный
Стилизованный c помощью NumberPlugin
стандартный стиль без использования бдополнительного параметра style
Применяется стиль classic
Стилизованный c помощью NumberPlugin
С использованием параметра style: 'line'

для подключения плагина добавьте в head

//html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="number_plugin/number_plugin.js" type="text/javascript"></script>
<link href="number_plugin/number_plugin.css" type="text/css" rel="stylesheet">

Создайте элемент типа input type="number"

//html code <input type="number" class="numb" id="1" value="1">

В файле с JavaScript

//js code
$(document).ready(function () {
    $('.numb').number_plugin();
});
Функции NumberPlugin
$('.numb').number_plugin({
    width: '65px', //ширина инпута на выводе (по умолчанию 65px редактируется как тут так и через css)
    height: '35px', //высота инпута на выходе (по умолчанию 35px редактируется как тут так и через css)
    negative: true, //включение поддержки отрицательных чисел (по умолчанию false)
    step: 20, //шаг прибавления и убавления (по умолчанию 1)
    animate: true, //включение анимации прибавления и вычитания (по умолчанию false)
    delay: 100, //задержка анимации между прибавлениями (по умолчанию 10ms)
    max: 100, //максимальное значение(по умолчанию false)
    min: 20, //минимальное значение(по умолчанию false)
    style: 'line', //стиль кнопок +/-, по умолчанию classic
});

Здесь может быть ваша реклама

Вы можете скачать NumberPlugin по прямой ссылке