如何用layui自定义带加减按钮的数字输入框-Layui教程-PHP中文网

如何用layui自定义带加减按钮的数字输入框

betcha

发布： 2024-12-17 09:00:35

原创

519人浏览过

通过引入layui.js文件并使用layui.form.render('number')初始化数字输入框，可以自定义带加减按钮的layui数字输入框。加减按钮分别绑定点击事件处理函数，点击后可增加或减少输入框中的数字。

如何用layui自定义带加减按钮的数字输入框

如何使用layui自定义带加减按钮的数字输入框

layui提供了强大的UI组件，其中包括数字输入框。但是，默认的数字输入框没有内置的加减按钮。本教程将指导您如何使用layui自定义带加减按钮的数字输入框。

步骤：

引入layui.js文件：
在您的HTML文件中，引入layui.js文件。

创建输入框元素：
创建如下HTML元素：

<div class="layui-input-inline">
  <input type="text" id="number" value="0" class="layui-input">
</div>

登录后复制

定义加减按钮：
在输入框的前面和后面定义加减按钮，如下所示：

<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初始化数字输入框，如下所示：
```
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);
});

登录后复制

效果：

通过上述步骤，您将创建一个带加减按钮的数字输入框。当用户点击加减按钮时，输入框中的数字将相应地加1或减1。

完整代码：

<!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中文网其它相关文章！