### 阻止 Layui 表单因回车键导致的自动提交 在 Layui 框架中，`<form>` 元素的行为遵循 HTML 的标准特性，默认情况下，当表单内存在输入框时，按下回车键会触发表单的提交操作。为了防止这种默认行为，可以通过 JavaScript 或者修改 DOM 结构的方式拦截事件。 以下是几种常见的解决方案： #### 方法一：通过 `onsubmit` 属性阻止默认提交行为 可以直接在 `<form>` 标签上绑定 `onsubmit="return false;"` 来禁用表单的默认提交功能。这种方式简单有效，适用于大多数场景。 ```html <form class="layui-form" onsubmit="return false;"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <!-- 更多表单项 --> </form> ``` #### 方法二：监听键盘事件并阻止冒泡 类似于 Element UI 中的做法[^3]，可以为整个表单添加一个全局的 `keydown` 事件监听器，并调用 `event.preventDefault()` 来中断回车键引发的默认动作。 ```javascript document.querySelector('.layui-form').addEventListener('keydown', function(event) { if (event.key === 'Enter') { event.preventDefault(); // 阻止回车键的默认行为 } }); ``` #### 方法三：使用 Layui 自带的 `lay-submit` 功能替代默认提交逻辑 Layui 提供了内置的表单提交机制，建议优先采用官方推荐的方式来处理表单交互。例如，移除传统的 `<form>` 默认行为，改由按钮点击触发表单验证和数据提交流程。 ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-inline"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <button class="layui-btn" lay-submit lay-filter="demo1">立即提交</button> </form> <script> layui.use(['form'], function(){ var form = layui.form; // 监听提交 form.on('submit(demo1)', function(data){ console.log(data.field); // 获取表单字段值 return false; // 阻止页面跳转 }); }); </script> ``` 以上三种方式均能有效地控制 Layui 表单中的回车键提交问题，具体选择取决于实际开发需求和个人偏好。 --- ###