当表单中只有一个输入框,按下回车后当前网页会被强制刷新,原因及解决方案

form元素是前端开发人员高频使用的元素之一,经常用于客户端中提交表单。开发中不难发现,当form元素只含有一个input元素或者textarea元素的时候,在输入框被激活的同时按下回车键,当前网页会被强制刷新。造成此现象的原因是当form元素只包含一个input时按回车会默认提交表单,因此刷新。
解决方案有如下:
方案一》
在form元素内部添加一个input元素:
<input type='text' style='display:none'/>

方案二》
将form元素去掉,为提交按钮直接绑定submit事件

方案三》
为input元素添加onkeydown事件,判断按下回车时屏蔽提交
onkeydown="if(event.keyCode==13){return false;}"

方案四》
直接在form元素上添加如下代码,阻止form元素的默认提交事件
<form onsubmit="return false;"></form>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 最初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。   尽管目前的...
    霜天晓阅读 698评论 0 3
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 926评论 0 1
  • f7a58c1a7159阅读 160评论 0 0
  • -阿布海外生活18年片段 97年香港回归,阿布还在内地念中学,对香港这个繁华的地方充满热力的想望。之后阿布到英国留...
    栗子逍遥阅读 474评论 0 1