阻止回车键触发Form表单的自动提交事件

最新推荐文章于 2025-04-30 09:57:22 发布

Small_tril

最新推荐文章于 2025-04-30 09:57:22 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Html 文章标签： html

本文链接：https://blog.youkuaiyun.com/Small_tril/article/details/124165377

Html 专栏收录该内容

1 篇文章

订阅专栏

当HTML Form中同时存在button和input，按下回车键可能会意外触发button的事件。为解决此问题，可以采取两种方法：1) 在form标签上添加onsubmit属性并设置为'return false'，阻止默认的提交行为；2) 在button上添加type属性，将其设置为'button'，确保不会在回车时触发。这两种方法经过测试都证实有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当Form表单中，存在button和input时，当input处于激活状态，此时如果输入回车，则会触发表单的button事件。此种情况不符合生产逻辑，需要进行处理。那么如何处理呢？

1、form标签上添加属性，οnsubmit="return false"

<form class="layui-form" id="infoForm" lay-filter="infoForm" role="form" onsubmit="return false;">
    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-left: 10px;">
            <table class="layui-hide" id="datatable" lay-filter="datatable"></table>
        </div>
    </div>
</form>

2、button上添加属性，type="button"

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="dbFieldManage">字段管理</button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="refresh">刷新列表</button>
    </div>
</script>

亲测可用