Skip to content

NumberBox(数值输入框)

扩展自$.fn.iValidatebox.defaults。使用$.fn.iNumberbox.defaults重写默认值对象。

数值输入框是用来限制用户只能输入数值型数据的。他可以转换一个输入的元素到其他类型,比如:数字、百分比、货币等。更多的输入类型定义依赖于'formatter'和'parser'函数。

依赖关系

用法

使用标签创建数值输入框。

html
<input type="text" value="100" data-toggle="topjui-numberbox" data-options="min:0,precision:2">

使用Javascript创建数值输入框。

html
<input type="text" id="nn">
javascript
$('#nn').iNumberbox({
    min:0,
    precision:2
});

属性

数值输入框的属性扩展自validatebox(验证框),数值输入框新增的属性如下:

属性名属性值类型描述默认值
disabledboolean是否禁用该字段。FALSE
valuenumber默认值。
minnumber允许的最小值。null
maxnumber允许的最大值。null
precisionnumber在十进制分隔符之后显示的最大精度。(即小数点后的显示精度)0
decimalSeparatorstring使用哪一种十进制字符分隔数字的整数和小数部分。.
groupSeparatorstring使用哪一种字符分割整数组,以显示成千上万的数据。(比如:99,999,999.00中的','就是该分隔符设置。)
prefixstring前缀字符。(比如:金额的$或者¥)
suffixstring后缀字符。(比如:后置的欧元符号€)
filterfunction(e)定义如何过滤按键,当返回true时则允许输入,反之禁止。
formatterfunction(value)用于格式化数值的函数。返回字符串值以显示到输入框中。
parserfunction(s)用于解析字符串的函数。返回数值。

事件

事件名事件参数描述
onChangenewValue,oldValue当字段值更改的时候触发。

方法

数值输入框的方法扩展自validatebox(验证框),数值输入框新增或重写的方法如下:

方法名方法参数描述
optionsnone返回数值输入框属性。
destroynone销毁数值输入框对象。
disablenone禁用字段。
enablenone启用字段。
fixnone将输入框中的值修正为有效的值。
setValuevalue设置数值输入框的值。见下方代码示例。
getValuenone获取数值输入框的值。见下方代码示例。
clearnone清楚数值输入框的值。
resetnone重置数值输入框的值。

方法代码示例

setValue方法示例:

javascript
$('#nn').iNumberbox('setValue', 206.12);

getValue方法示例:

javascript
var v = $('#nn').iNumberbox('getValue');
alert(v);

基于最新稳定版jQuery EasyUI构建的前端框架