Bootstrap-input-spinner数字增减框
- 特性
- 安装
- 使用
- - html
  - Script
- 语法和配置
- - HTML
  - Script
  - - Configuration
    - decrementButton, incrementButton
    - groupClass
    - buttonsClass
    - buttonsWidth
    - textAlign
    - autoDelay
    - autoInterval
    - boostThreshold
    - boostMultiplier
    - Programmatic change and read of value
    - Handling attributes
    - Sizing
    - Events
    - - 使用vanilla JavaScript处理事件
      - 使用jQuery处理事件
- 缩小版
- 浏览器支持

Bootstrap-input-spinner数字增减框

一个Bootstrap 4 / jQuery插件，用于数字输入并创建输入微调按钮。

特性

Bootstrap 4 InputSpinner是：
1.支持移动端且反应迅速。
2.点击按钮会自动更改值，长按按钮会持续更改值。
3.支持国际化数字格式。
4.允许设置值前缀和后缀。
5.可像普通元素一样使用val()。
6.动态更改元素属性。
7.更改值时触发事件。
8.无需额外的CSS，仅需导入Bootstrap4的标准CSS。

安装

npm install -save bootstrap-input-spinner

或者在GitHub下载src / bootstrap-input-spinner.js。

使用

html

在HTML中创建元素。创建input框并设置 type =“ number”。

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

Script

这是一个jQuery插件。因此，使用以下脚本为所有类型为"number"的输入启用InputSpinner。

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

无需额外的CSS，只需Bootstrap 4和jQuery。

语法和配置

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 //输入模式，默认为“ decimal”（显示触摸设备上的十进制键盘）
data-step-max //步进时最大提升
data-decimals //显示的小数位
data-digit-grouping //“false"禁用分组（千位分隔符），默认为"true”
data-prefix //在输入元素中显示前缀文本
data-suffix //在输入元素中显示后缀文本

InputSpinnerh也处理标准输入框属性，required, disabled, readonly和placeholder。

Script

使用JavaScript将实例创建为jQuery插件。您可以在对象中提供其他配置作为config参数。

$(element).inputSpinner(config);

Configuration

默认配置为：

var config = {decrementButton: "<strong>-</strong>", // 按钮文本incrementButton: "<strong>+</strong>", // ..groupClass: "", // 输入组的CSS类buttonsClass: "btn-outline-secondary",buttonsWidth: "2.5rem",textAlign: "center",autoDelay: 500, // 自动值更改前保持 msautoInterval: 100, // 自动值更改速度boostThreshold: 10, // boost after these stepsboostMultiplier: "auto" // you can also set a constant number as multiplier
}

从浏览器设置中检测到数字格式的语言环境。

decrementButton, incrementButton

按钮内文本的HTML

groupClass

输入组的附加CSS类，源码：

<div class="input-group ' + config.groupClass + '">

buttonsClass

按钮的css类。如此处所述，使用它来设置递增和递减按钮的样式。比如buttonClass：btn-primary或btn-success或您想要的任何类型的按钮。

buttonsWidth

增量和减量按钮的宽度。

textAlign

<input> 内部的文本对齐方式

autoDelay

按住递增或递减按钮后，输入将自动更改值的延迟（以毫秒为单位）。

autoInterval

按住按钮时的值更改速度（以毫秒为单位）。较低的值使其更快。

boostThreshold

这些自动值更改后，将以boostMultiplier的速度增加。

boostMultiplier

自动值更改的boostThreshold步骤后的速度乘数。如果设置为“自动”（默认值），乘数将随着时间增加。

Programmatic change and read of value

更改或读取值只需在输入上使用jQuery的val()函数，就像这样：

var currentValue = $(element).val() // 读
$(element).val(newValue) // 写

提示：在 vanilla JS中使用element.value读取值也可以，但是要设置该值，您必须使用element.setValue(newValue)或$(element).val(newValue)

Handling attributes

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

Sizing

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

Events

InputSpinner处理input和change事件，例如本地元素。

使用vanilla JavaScript处理事件

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

使用jQuery处理事件

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

缩小版

我不提供缩小版本，因为我认为应该由使用程序员来创建缩小版本，并将所有使用的脚本源都链接到一个文件中。
但是，如果您愿意，可以使用uglify轻松创建缩小版本：https://www.npmjs.com/package/uglify-js

只需安装uglify。

npm install uglify-js -g

然后在src文件夹中：

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

浏览器支持

bootstrap-input-spinner可在所有现代浏览器和Internet Explorer中使用。未通过IE <11进行测试。
对于较旧的浏览器（IE 9或更高版本），它不支持Intl，当您收到诸如“Intl is not defined”之类的错误消息时，只需使用Shim或polyfill之类的Intl.js即可。

bootstrap4 input-spinner数字增减框的使用相关推荐

html5 文本框限制,html中input禁止输入(禁止获得焦点)多种方法及input限制数字和长度...
input禁止输入(禁止获得焦点) 1: readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本. 2:disabled 被 ...
关于input type=“text”文本框的默认宽度
当文本框的td设置宽度设置为百分比时,出现了一些没有搞懂的地方. 类选择设置td的width 为百分比时,通常要定义父元素的宽度,在我的实战中父元素只能是table,给定table时. 而且这就是说 ...
C# 全选中数字文本框内容
/// <summary> /// 全选中数字文本框内容 /// </summary> /// <param name=& ...
cocoscreator editbox 只允许数字_《Cocos Creator游戏实战》做一个数字调节框
当玩家购买道具的时候,一个个买可能会比较麻烦,用数字调节框的话玩家一次性就可以买好几十个了(钱够的话). 运行效果如下: Cocos Creator版本:2.2.0 公号"All Codes ...
cocoscreator editbox 只允许数字_用Cocos做一个数字调节框
点击上方蓝色字关注我们~ 当玩家购买道具的时候,一个个买可能会比较麻烦,用数字调节框的话玩家一次性就可以买好几十个了(钱够的话). 运行效果如下: Cocos Creator版本:2.2.0 后台回复 ...
Acitivity（页面）之间的跳转，ProgressBar 进度条，PopupWindow 弹出框，Dialog 对话框，Spinner下拉框
Acitivity(页面)之间的跳转 Acitivity(页面)之间的跳转需要使用到 Intent(意图) Intent intent = new Intent(MainActivity.this(从 ...
android spinner下拉框
下拉框其实自己很少用到,不过昨天因为写界面时,自己用到了,当时忘记怎么写,所以在网上找了一下资料,做了一个自定义的下拉框.这里,自己把所做的记录一下,以免自己以后还需要到网上查找. 1.用androi ...
在jsp的input输入框数字过大出现 NaN
1.在jsp的input输入框数字过大出现 NaN 解决方案:在方法体里面加入加这个代码就可以了 studentnumber 改成自己输入框的 name的值 studentnumber=parseF ...
Android基础入门教程——2.4.10 Spinner(列表选项框)的基本使用
Android基础入门教程--2.4.10 Spinner(列表选项框)的基本使用标签(空格分隔): Android基础入门教程本节引言: 本来本节是想给大家介绍一个Gallery(画廊)的一个控 ...

bootstrap4 input-spinner数字增减框的使用

目录

Bootstrap-input-spinner数字增减框

特性

安装

使用

html

Script

语法和配置

HTML

Script

Configuration

decrementButton, incrementButton

groupClass

buttonsClass

buttonsWidth

textAlign

autoDelay

autoInterval

boostThreshold

boostMultiplier

Programmatic change and read of value

Handling attributes

Sizing

Events

使用vanilla JavaScript处理事件

使用jQuery处理事件

缩小版

浏览器支持

bootstrap4 input-spinner数字增减框的使用相关推荐

最新文章

热门文章