当前位置: 首页 > news >正文

HTML from表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)

问题

        按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新,先执行了js的方法后自动提交表单,使它相当于没有执行js方法,查阅资料得知在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性。然而,很多情况下,我们不需要自动提交。

解决方案

  1. 方案一:很多人估计都想到过,就是既然一个input会自动提交,多个input就没问题,那么我给它多加一个input不就行了,有些人试过发现不行,那是为什么呢?
    因为他是这么写的<input type="hidden">,这样当然不行,一个隐藏域,type并不是text,所以不行。
    但是,<input type="text" style="display:none;">,使用这种方法就可以了,因为它是用样式隐藏输入框的,实质上还是一个type为text的input。
  2. 方案二:直接对form属性进行操作,个人推荐这种方式。直接在form上加上οnsubmit="return false;"这个属性,它会阻止表单的回车键进行提交。

相关文章:

  • SpringBoot集成Druid启动报错testWhileIdle is true, validationQuery not set
  • 如何用fiddler进行弱网测试(工作常用篇)
  • Qt官方案例知识点总结(拖放操作——Drag And Drop Robot )
  • 【Linux 网络】网络工具ifconfig和iproute/iproute2工具详解
  • java网络原理5
  • Linux 基础IO(上)--文件与文件描述符fd
  • python将字符串转成二进制数组
  • JVM快速入门
  • scGPT方法解读
  • (即插即用模块-特征处理部分) 四十五、(2024 TGRS) SFF 浅层特征融合模块
  • WebRtc09:网络基础P2P/STUN/TURN/ICE
  • [实战] Petalinux驱动开发以及代码框架解读
  • IBM WebSphere Application Server 7.0/8.5.5证书过期问题处理
  • firecrawl的docker安装和api调用
  • 【python】-基础语法3
  • flutter开发音乐APP(简单的音乐播放demo)
  • Android Compose 无网络状态处理全指南:从基础到高级实践
  • 家庭服务器IPV6搭建无限邮箱系统指南
  • 米壳AI:跨境电商图片翻译的“隐形革命”:当AI技术遇上全球化生意
  • 每日算法-250430
  • “译通天下·言立寰宇”:华东师大翻译家的精神传承
  • 青海西宁市城西区副区长于媛媛主动投案,接受审查调查
  • 五月院线片单:就看五一档表现了
  • 宣称防老年痴呆的“原装进口”保健品McPee被指涉假,未获澳方销售批准
  • 图像编辑新增一款开源模型,阶跃星辰发布Step1X-Edit
  • 高璞任中国一汽党委常委、副总经理