一个Bootstrap插件，用于为数字输入创建输入微调器元素
Posted
tags:
中文标题：一个Bootstrap插件，用于为数字输入创建输入微调器元素 原文标题：A Bootstrap plugin to create input spinner elements for number input 项目评级：Star:222 Fork:167 下载地址：https://github.com/shaack/bootstrap-input-spinner 详情介绍引导输入微调器
一个Bootstrap/jQuery插件，用于创建数字输入的输入微调器元素。
带有示例的演示页面
浮点和德语本地化示例
这个版本与Bootstrap 5兼容，但我们仍然是Bootstrap 4与分支兼容的版本
bootstrap4兼容。
npm包版本3.x与Bootstrap 5兼容，版本2.x与Bootstrap 4兼容。
特征
引导输入微调器
快速启动
安装
当前版本，Bootstrap 5兼容
Bootstrap 4兼容版本
或者只需下载GitHub存储库并包含src/bootstrap-input-spinner.js。
HTML格式
用HTML创建元素。属性与原生input[type="number"]元素兼容。
剧本
它是一个jQuery插件。因此，使用以下脚本为type='number'的所有输入启用InputSpinner。
就是这样。不需要额外的css，只需要Bootstrap 5和jQuery。
API参考
HTML属性
使用这些属性来配置行为
InputSpinner还处理标准输入属性required、disabled、readonly和placeholder。
用JavaScript创建实例
使用JavaScript将实例创建为jQuery插件。您可以在对象中提供附加配置作为
config参数。
配置（道具）
默认配置为
递减按钮，递增按钮
按钮内文本的HTML。
组类别
用于渲染的Bootstrap输入的input-group的附加css类。
按钮类别
按钮的css类。使用它将递增和递减按钮设置为
此处描述。可能buttonsClass: btn-primary
或btn-success或您想要的任何类型的按钮。
按钮宽度
递增和递减按钮的宽度。
text对齐
<input>内部的文本对齐方式。
自动延迟
当按住递增或递减按钮时，输入自动更改值的延迟（毫秒）。
自动间隔
按住按钮时值的变化速度（毫秒）。值越低，速度越快。
按钮仅限
在buttonsOnly模式下（设置true），不允许直接输入文本，文本输入属性readonly，但
加号和减号按钮仍然允许更改值。
键盘步进
在keyboardStepping模式下（设置true），允许使用上/下箭头键通过
场所
用于格式化用户界面中的数字。从用户浏览器自动检测，可以设置为“de”、“en”、…或“
de_de”、“en_GB”、，…。
编辑器（新！）
编辑器定义了如何解析和呈现输入。微调器的默认编辑器是I18nEditor
呈现并解析国际化的数值。/src/custom-editors.js中有自定义编辑器。编辑
必须实现两个函数parse(customValue)，以将输入解析为数字，render(number)，以呈现
微调器输入的数字。
最简单的自定义编辑器是RawEditor，它只渲染值，只解析值，没有任何更改，
就像本地数字输入一样。它看起来是这样的：
props是微调器的配置，element是原始HTML元素。您可以将这些值用于
编辑器的配置，如I18nEditor中，语言使用props，属性使用element。
TimeEditor以小时和分钟为单位，用冒号分隔，将数字呈现并解析为时间。
支持自定义编辑器来解析和呈现所有内容
样板
要完全修改外观，可以使用template参数。在
演示页面。
程序更改和读取值
要更改或读取值，只需在输入上使用jQueryval()函数，如下所示
提示：读取香草JS中element.value的值也可以，但要设置值，必须使用element.setValue(newValue)或$(element).val(newValue)
处理属性
属性
min、max、$(element).val(newValue)、decimals、placeholder、required、disabled、readonly和class
是动态处理的。class属性值被动态复制到输入元素。
尺寸
如果原始元素类设置为form-control-lg中的form-control-sm，则结果输入组的类
动态设置为input-group-sm或input-group-lg。
事件
InputSpinner像本地元素一样处理input和change事件。
使用va处理事件
nilla JavaScript语言
使用jQuery语法处理事件
方法
方法是作为字符串值而不是选项对象传递的。
摧毁
删除InputSpinner并显示原始输入元素。
小型化版本
我不提供缩小版，因为我认为应该由使用程序员来创建缩小版，
所有使用过的脚本源连接到一个文件中。
但是，如果你想要的话，很容易用uglify创建你的缩小版：https://www.npmjs.com/package/uglify-js
只需安装uglify
然后在src文件夹中
小提琴！：）
浏览器支持
微调器适用于所有现代浏览器和Internet Explorer。未使用IE<；11.
对于较旧的浏览器（IE 9左右），不支持Intl，当您收到以下错误消息时
“未定义Intl”（请参阅第34期），只需使用
垫片或像Intl.js一样的polyfill，它可以工作。
你可能想看看我的更多Bootstrap和HTML扩展
用于防止输入任何不匹配正则表达式的输入的 jquery 插件
bootstrap input type=number时的输入位数怎么限制
数字输入中的 Google Chrome Android 逗号 (Bootstrap-Vue)
Rails 中的 .field_with_errors 使用插件破坏了 Twitter Bootstrap 3 输入样式