Amaze UI

Inputnumber


数字输入框

基础用法

Copy
<input type="number"  class="am-form-field am-inputnumber my-inputnumber2" data-am-inputnumber="{max:10}" />
<input type="number"  class="am-form-field am-inputnumber" data-am-inputnumber disabled />

.am-inputnumber 上添加 data-am-inputnumber 属性即可使用数字输入框效果。 在 .am-inputnumber 上添加 disabled 属性即可禁用数字输入框功能。

在线运行

步长定义

允许自定义每次点击的步长

Copy
<input type="number"  class="am-form-field am-inputnumber my-inputnumber"/>
<script>
  $(function() {
    $('.my-inputnumber').inputnumber({
      // 设置值为 0
      set: 0,
      // 设置每次点击增加或者减少 0.3
      step: 0.3
    });
  });
</script>

设置 step 属性调整每次点击递增递减步长值。

在线运行

获取当前值

Copy
<input type="number"  class="am-form-field am-inputnumber my-inputnumber3" data-am-inputnumber="{max:30}" />
<button type="text" class="am-btn am-btn-primary get-value" value="获取当前值" >获取</button>
<script>
  $(function() {
    $('.get-value').click(function(){
      alert($('.my-inputnumber3').inputnumber('get'));
    });
  });
</script>

通过 get 参数获取当前输入框内的值。

在线运行

参数说明

参数类型描述
setnumber设置计数器的值
getstring获取计数器的值,例如:$(ele).InputNumber('get')
sizenumber计数器大小
stepnumber计数器步长
minnumber设置计数器允许的最小值
maxnumber设置计数器允许的最大值
disabledboolean是否禁用计数器
controlsboolean是否使用控制按钮