README

安装

Composer

composer require gaomingcode/jquery.spinner

原始 ReadMe

一个 Bootstrap / jQuery 插件，用于创建数字输入的输入旋转按钮元素。

带有示例的演示页面

带有浮点数和德语本地化的示例

此版本与 Bootstrap 5 兼容，但我们仍然有通过分支 bootstrap4-compatible 兼容 Bootstrap 4 的版本。npm 包版本 3.x 与 Bootstrap 5 兼容，版本 2.x 与 Bootstrap 4 兼容。

功能

Bootstrap 输入旋转器

是 移动友好 且 响应式 的，
在按住按钮时自动更改值，
具有 国际化 的数字格式，
允许在输入中设置前缀或后缀文本，
像原生元素一样处理 val()，
动态处理 属性值，如 disabled 或 class，
支持模板和 自定义编辑器，（新功能！）
在值更改时派发 change 和 input 事件，就像原生元素一样，
无需额外 CSS，只需 Bootstrap 5 即可。

快速入门

安装

当前版本，与 Bootstrap 5 兼容

npm install bootstrap-input-spinner

与 Bootstrap 4 兼容的版本

nom install bootstrap-input-spinner@2.1.2

或者只需下载 GitHub 仓库，并包含 src/bootstrap-input-spinner.js。

HTML

在 HTML 中创建元素。属性与原生 input[type="number"] 元素兼容。

<input type="number" value="50" min="0" max="100" step="10"/>

脚本

它是一个 jQuery 插件。因此，使用以下脚本为所有 type='number' 输入启用 InputSpinner。

<script src="src/bootstrap-input-spinner.js"></script>
<script>
    $("input[type='number']").inputSpinner();
</script>

就这样。 无需额外的 CSS，只需 Bootstrap 5 和 jQuery。

API 参考

HTML 属性

<input type="number" value="4.5" min="0" max="9" step="0.1" data-decimals="2" data-suffix="°C"/>

使用这些属性来配置行为

value // 元素创建时的起始值
min // 步进时的最小值
max // 步进时的最大值
step // 步进大小
inputmode // 输入的 "inputmode"，默认为 "decimal"（在触摸设备上显示十进制键盘）
data-decimals // 显示的小数位数
data-digit-grouping // "false" 以禁用分组（千位分隔符），默认为 "true"
data-prefix // 在输入元素中显示前缀文本
data-suffix // 在输入元素中显示后缀文本

InputSpinner 还处理标准输入属性 required、disabled、readonly 和 placeholder。

在 JavaScript 中创建实例

使用 JavaScript 将实例作为 jQuery 插件创建。您可以在配置对象中提供额外的配置。

$(element).inputSpinner(config);

配置（属性）

默认配置是

var props = {
    decrementButton: "<strong>&minus;</strong>", // button text
    incrementButton: "<strong>&plus;</strong>", // ..
    groupClass: "", // css class of the resulting input-group
    buttonsClass: "btn-outline-secondary",
    buttonsWidth: "2.5rem",
    textAlign: "center", // alignment of the entered number
    autoDelay: 500, // ms threshold before auto value change
    autoInterval: 50, // speed of auto value change
    buttonsOnly: false, // set this `true` to disable the possibility to enter or paste the number via keyboard
    keyboardStepping: true, // set this to `false` to disallow the use of the up and down arrow keys to step
    locale: navigator.language, // the locale, per default detected automatically from the browser
    editor: I18nEditor, // the editor (parsing and rendering of the input)
    template: // the template of the input
        '<div class="input-group ${groupClass}">' +
        '<button style="min-width: ${buttonsWidth}" class="btn btn-decrement ${buttonsClass} btn-minus" type="button">${decrementButton}</button>' +
        '<input type="text" inputmode="decimal" style="text-align: ${textAlign}" class="form-control form-control-text-input"/>' +
        '<button style="min-width: ${buttonsWidth}" class="btn btn-increment ${buttonsClass} btn-plus" type="button">${incrementButton}</button>' +
        '</div>'
}

decrementButton, incrementButton

按钮内文本的HTML。

groupClass

为渲染的Bootstrap输入的input-group添加额外的css类。

buttonsClass

按钮的css类。使用它来根据以下描述（此处）样式化增加和减少按钮。可能是buttonsClass: btn-primary或btn-success或您想要的任何类型的按钮。

buttonsWidth

增加和减少按钮的宽度。

textAlign

在<input>内的文本对齐。

autoDelay

在输入自动更改值之前，在按住增加或减少按钮后经过的毫秒延迟。

autoInterval

按住按钮时值变化的速率（毫秒）。值越小，速度越快。

buttonsOnly

在buttonsOnly模式（设置true）下，不允许直接文本输入，文本输入获得readonly属性，但加号和减号按钮仍然允许更改值。

keyboardStepping

在keyboardStepping模式（设置true）下，允许使用上/下箭头键通过步长增加/减少数字。

locale

用于在UI中格式化数字。自动从用户的浏览器检测，可以设置为 "de"、"en"…或" de_DE"、"en_GB"…。

editor (新！)

编辑器定义了如何解析和渲染输入。默认的编辑器是I18nEditor，它渲染和解析国际化的数字值。在/src/custom-editors.js中存在自定义编辑器。编辑器必须实现两个函数 parse(customValue)，用于将输入解析为数字，以及 render(number)，用于将数字渲染到旋转器输入。

最简单的自定义编辑器是RawEditor，它仅渲染和解析值，不进行任何更改，就像原生的数字输入一样。它看起来像这样

var RawEditor = function (props, element) {
    this.parse = function (customFormat) {
        // parse nothing
        return customFormat
    }
    this.render = function (number) {
        // render raw
        return number
    }
}

props是旋转器的配置，而element是原始的HTML元素。您可以使用这些值来配置编辑器，如I18nEditor，它使用props进行语言配置，使用element进行属性。

TimeEditor将数字渲染和解析为小时和分钟，用冒号分隔。

支持自定义编辑器来解析和渲染一切

template (新！)

要完全修改外观，可以使用模板参数。在演示页面上有一个关于此的示例。

程序化更改和读取值

要更改或读取值，只需在输入上使用jQuery val()函数，如下所示

var currentValue = $(element).val() // read
$(element).val(newValue) // write

提示：使用element.value在纯JS中读取值也将有效，但设置值时必须使用element.setValue(newValue)或$(element).val(newValue)

处理属性

min、max、step、decimals、placeholder、required、disabled、readonly和class属性被动态处理。class属性值被动态复制到输入元素。

尺寸

如果原始元素的类设置为form-control-sm或form-control-lg，则结果输入组的类将被动态设置为input-group-sm或input-group-lg。

事件

InputSpinner像原生元素一样处理input和change事件。

使用纯JS进行事件处理

element.addEventListener("change", function (event) {
    newValue = this.value
})

使用jQuery语法进行事件处理

$(element).on("change", function (event) {
    newValue = $(this).val()
})

方法

方法作为字符串值传递，而不是选项对象。

destroy

移除InputSpinner并显示原始输入元素。

$(element).inputSpinner("destroy")

压缩版本

我不提供压缩版本，因为我认为应该由使用此代码的开发者来创建压缩版本，将所有使用的脚本源代码合并到一个文件中。

但是，如果您需要，使用uglify创建压缩版本很容易：https://npmjs.net.cn/package/uglify-js

只需安装uglify

npm install uglify-js -g

然后在src文件夹中

uglifyjs bootstrap-input-spinner.js --compress --mangle > bootstrap-input-spinner.min.js

太棒了！ :)

浏览器支持

该旋钮在所有现代浏览器和Internet Explorer中工作。未测试IE版本小于11的情况。

对于不支持Intl的旧浏览器（IE 9或更早），当您收到类似“Intl未定义”的错误消息时（见问题#34），只需使用垫片或polyfill，如Intl.js，它就能正常工作。

我们的其他Bootstrap和HTML扩展

如果您喜欢这个组件，您可能还想查看我们的其他Bootstrap和HTML扩展 bootstrap-show-modal，bootstrap-detect-breakpoint，auto-resize-textarea 和 external-links-blank。

gaomingcode / jquery.spinner

维护者

详细信息