如何使用layui自定义带加减按钮的数字输入框
layui提供了强大的UI组件，其中包括数字输入框。但是，默认的数字输入框没有内置的加减按钮。本教程将指导您如何使用layui自定义带加减按钮的数字输入框。
步骤：
引入layui.js文件：在您的HTML文件中，引入layui.js文件。创建输入框元素：创建如下HTML元素：
1
2
3
<div class="layui-input-inline">
<input type="text" id="number" value="0" class="layui-input">
</div>
定义加减按钮：在输入框的前面和后面定义加减按钮，如下所示：
1
2
<button class="layui-btn layui-btn-primary" id="minus"><i class="layui-icon layui-icon-subtraction"></i></button>
<button class="layui-btn layui-btn-primary" id="plus"><i class="layui-icon layui-icon-addition"></i></button>
初始化layui数字输入框：使用layui.form初始化数字输入框，如下所示：
1
layui.form.render(number);
绑定加减按钮事件：为加减按钮绑定点击事件，如下所示：
1
2
3
4
5
6
7
8
9
10
$(#minus).click(function() {
let value = parseInt($(#number).val()) - 1;
if (value < 0) value = 0;
$(#number).val(value);
});
$(#plus).click(function() {
let value = parseInt($(#number).val()) + 1;
$(#number).val(value);
});
效果：
通过上述步骤，您将创建一个带加减按钮的数字输入框。当用户点击加减按钮时，输入框中的数字将相应地加1或减1。
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layui数字输入框加减按钮</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-primary" id="minus"><i class="layui-icon layui-icon-subtraction"></i></button>
<input type="text" id="number" value="0" class="layui-input">
<button class="layui-btn layui-btn-primary" id="plus"><i class="layui-icon layui-icon-addition"></i></button>
</div>
<script src="layui/layui.js"></script>
<script>
layui.form.render(number);
$(#minus).click(function() {
let value = parseInt($(#number).val()) - 1;
if (value < 0) value = 0;
$(#number).val(value);
});
$(#plus).click(function() {
let value = parseInt($(#number).val()) + 1;
$(#number).val(value);
});
</script>
</body>
</html>
以上就是如何用layui自定义带加减按钮的数字输入框的详细内容，更多请关注php中文网其它相关文章！