layui数字输入框加减按钮的点击事件如何处理-Layui教程-PHP中文网

layui数字输入框加减按钮的点击事件如何处理

狼影

发布： 2024-12-17 13:34:04

原创

420人浏览过

layui 数字输入框加减按钮点击事件可通过 click 方法处理，具体操作步骤如下：初始化数字输入框；监听加减按钮点击事件，获取点击按钮的字段名，用于判断是加还是减；根据字段名，对输入框的值进行加减操作；更新输入框的值。

layui数字输入框加减按钮的点击事件如何处理

layui 数字输入框加减按钮点击事件处理

一、开门见山回答

layui 数字输入框的加减按钮点击事件可以通过 click 方法处理。

二、详细展开回答

1. 初始化数字输入框

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

<code class="html"><input type="number" id="demo" lay-verify="required" autocomplete="off" class="layui-input"></code>

登录后复制

2. 监听加减按钮点击事件

<code class="javascript">layui.use('form', function(){
  var form = layui.form;
  
  form.on('click('+ selector +')', function(data){
    var inputVal = parseInt(data.elem.prev().val());
    // 加1
    if(data.field == 'add') inputVal++;
    // 减1
    if(data.field == 'sub') inputVal--;
    
    data.elem.prev().val(inputVal);
  });
});</code>

登录后复制

其中：

selector 为加减按钮的父级元素选择器，如 .layui-input-group
data.elem 为点击的加减按钮元素
data.field 为按钮对应的字段名，如 add 或 sub

三、示例

<code class="html"><div class="layui-input-group">
  <button type="button" class="layui-btn" lay-field="sub">-</button>
  <input type="number" id="demo" lay-verify="required" autocomplete="off" class="layui-input">
  <button type="button" class="layui-btn" lay-field="add">+</button>
</div>
<script>
layui.use('form', function(){
  var form = layui.form;
  form.render();  // 初始化
  
  form.on('click(.layui-input-group button)', function(data){
    var inputVal = parseInt(data.elem.prev().val());
    if(data.field == 'add') inputVal++;
    if(data.field == 'sub') inputVal--;
    
    data.elem.prev().val(inputVal);
  });
});
</script></code>

登录后复制

以上就是layui数字输入框加减按钮的点击事件如何处理的详细内容，更多请关注php中文网其它相关文章！