如何使用 layui 实现带加减按钮的数字输入框
1. 引入 layui 库
在 HTML 页面中引入 layui 库：
1
<script src="layui/layui.js"></script>
2. 初始化数字输入框
使用 layui.input() 方法初始化数字输入框：
1
2
3
4
5
6
layui.input({
elem: #number-input,
min: 0, // 最小值
max: 100, // 最大值
step: 1 // 步长
})
3. 添加加减按钮
在数字输入框元素中添加加减按钮的 HTML 代码：
1
2
3
4
5
6
7
8
9
<div class="layui-input-group">
<div class="layui-input-addon">
<button type="button" class="layui-btn layui-btn-primary" id="btn-add">+</button>
</div>
<input type="text" id="number-input" class="layui-input">
<div class="layui-input-addon">
<button type="button" class="layui-btn layui-btn-primary" id="btn-sub">-</button>
</div>
</div>
4. 为按钮添加事件监听
为加减按钮添加事件监听，以更新数字输入框的值：
1
2
3
4
5
6
7
8
9
$(#btn-add).click(function() {
var value = parseInt($(#number-input).val()) + 1;
$(#number-input).val(value);
});
$(#btn-sub).click(function() {
var value = parseInt($(#number-input).val()) - 1;
$(#number-input).val(value);
});
以上就是layui如何实现带加减按钮的数字输入框的详细内容，更多请关注php中文网其它相关文章！