如何在layui表单中使用带加减按钮的数字输入框-Layui教程-PHP中文网

如何在layui表单中使用带加减按钮的数字输入框

夜晨

发布： 2024-12-17 09:07:24

原创

1083人浏览过

在 layui 表单中实现带加减按钮的数字输入框：引入 layui 库。创建数字输入框，并设置最小值、最大值和初始值。添加加减号图标按钮。绑定点击事件，实现加减值功能，并在允许范围内对输入框的值进行更新。

如何在layui表单中使用带加减按钮的数字输入框

在 layui 表单中使用带加减按钮的数字输入框

在 layui 表单中使用带加减按钮的数字输入框，可以实现方便、灵活的数字输入。具体操作步骤如下：

1. 引入依赖

<code class="html"><script src="layui/layui.js"></script></code>

登录后复制

2. 创建数字输入框

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

<code class="html"><input type="number" id="input-number" lay-type="number" min="0" max="100" value="0"></code>

登录后复制

min：最小值
max：最大值
value：初始值

3. 绑定加减按钮

<code class="html"><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></code>

登录后复制

layui-icon-add-1：加号图标
layui-icon-subtraction：减号图标
id：自定义按钮 ID，用于绑定事件

4. 绑定事件

<code class="javascript">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);
    }
  });
});</code>

登录后复制