一、开门见山回答
layui 数字输入框的加减按钮点击事件可以通过 click 方法处理。
二、详细展开回答
1. 初始化数字输入框
1
<input type="number" id="demo" lay-verify="required" autocomplete="off" class="layui-input">
2. 监听加减按钮点击事件
1
2
3
4
5
6
7
8
9
10
11
12
13
layui.use(form, function(){
var form = layui.form;
form.on(click(+ selector +), function(data){
var inputVal = parseInt(data.elem.prev().val());
// 加1
if(data.field == add) inputVal++;
// 减1
if(data.field == sub) inputVal--;
data.elem.prev().val(inputVal);
});
});
其中：
selector 为加减按钮的父级元素选择器，如 .layui-input-group data.elem 为点击的加减按钮元素 data.field 为按钮对应的字段名，如 add 或 sub三、示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="layui-input-group">
<button type="button" class="layui-btn" lay-field="sub">-</button>
<input type="number" id="demo" lay-verify="required" autocomplete="off" class="layui-input">
<button type="button" class="layui-btn" lay-field="add">+</button>
</div>
<script>
layui.use(form, function(){
var form = layui.form;
form.render(); // 初始化
form.on(click(.layui-input-group button), function(data){
var inputVal = parseInt(data.elem.prev().val());
if(data.field == add) inputVal++;
if(data.field == sub) inputVal--;
data.elem.prev().val(inputVal);
});
});
</script>