在 layui 表单中使用带加减按钮的数字输入框
在 layui 表单中使用带加减按钮的数字输入框，可以实现方便、灵活的数字输入。具体操作步骤如下：
1. 引入依赖
1
<script src="layui/layui.js"></script>
2. 创建数字输入框
1
<input type="number" id="input-number" lay-type="number" min="0" max="100" value="0">
3. 绑定加减按钮
1
2
<i class="layui-icon layui-icon-add-1" style="position: absolute; right: 28px; top: 10px; cursor: pointer;" id="add-btn"></i>
<i class="layui-icon layui-icon-subtraction" style="position: absolute; right: 12px; top: 10px; cursor: pointer;" id="sub-btn"></i>
4. 绑定事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
layui.use(form, function() {
var form = layui.form;
// 加号按钮点击事件
$(#add-btn).on(click, function() {
var value = parseInt($(#input-number).val());
if (value < 100) {
value++;
$(#input-number).val(value);
}
});
// 减号按钮点击事件
$(#sub-btn).on(click, function() {
var value = parseInt($(#input-number).val());
if (value > 0) {
value--;
$(#input-number).val(value);
}
});
});
以上就是如何在layui表单中使用带加减按钮的数字输入框的详细内容，更多请关注php中文网其它相关文章！