Layui表格单元格编辑如何设置输入类型为数字-Layui教程-PHP中文网

最稳方案是 edit: 'text' + focus 时动态设 type="number"；需配合 inputmode="numeric" 兼容 iOS，templet 适用于带 min/max/step 的场景，input 事件过滤+lay-verify 双重校验防非法输入。

edit: 'text' + focus 时强制 type="number" 是最稳的方案

layui 原生不支持 edit: 'number'（2.8+ 仍无该枚举值），所谓“数字编辑”本质还是文本框，只是加了校验和 ui 增强。想让软键盘弹出数字类型、禁用非数字输入，必须手动干预 input 的 type 属性。

最可靠的做法是在编辑框获得焦点时，动态改 type：

layui.$(document).on('focus', '.layui-table-edit', function() {
  layui.$(this).attr('type', 'number');
});

注意两点：

这个监听是全局的，如果只想对某列生效，加字段过滤：layui.$(this).closest('td').data('field') === 'price'
iOS Safari 下 type="number" 可能触发小数点输入异常，可补上 inputmode="numeric" 提升兼容性
别在 templet 里写 <input type="number"> —— 编辑态 DOM 是 layui 动态生成的，模板只控制初始渲染

用 templet 自定义数字输入框（适合带 range/step 的场景）

当需要 min、max、step 或自定义样式时，templet 是唯一可控路径。但必须配合 event 手动接管编辑逻辑，因为 templet 和 edit 互斥。

示例：成绩列，范围 0–100，步长 0.5

<script type="text/html" id="TPL-score-input">
  <input type="number" name="score" value="{{=d.score||0}}" min="0" max="100" step="0.5" class="layui-input">
</script>

列配置中这样写：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

{ field: 'score', title: '成绩', templet: '#TPL-score-input', event: 'editScore' }

然后监听 tool 事件并激活表单渲染：

table.on('tool(test-table)', function(obj) {
  if (obj.event === 'editScore') {
    var $input = layui.$(obj.elem).find('input');
    $input.focus();
    layui.form.render('number', $input.closest('tr').attr('lay-filter'));
  }
});

edit: 'text' 下做输入实时过滤（防粘贴/拖入非数字）

仅靠 type="number" 不够，用户仍可粘贴字母、拖入文件、用开发者工具改 DOM。真要锁死输入内容，得监听 input 事件做清洗：

layui.$(document).on('input', '.layui-table-edit', function() {
  var val = this.value.replace(/[^\d.-]/g, '');
  // 允许一个负号、一个小数点，且不能开头或结尾是点
  if (val.indexOf('-') > 0 || val.split('.').length > 2 || val.slice(-1) === '.') {
    val = val.slice(0, -1);
  }
  this.value = val;
});

更稳妥的做法是结合 lay-verify="number" 在提交前再校一次，但注意：表格编辑不走 form 提交流程，得在 table.on('edit(filter)') 里手动校验：