禁止回车提交form表单

作者: Separes | 来源:发表于2017-02-13 15:33 被阅读587次

禁止回车提交form表单
form表单中只有一个input时，按enter键禁止刷新页面
前端调试指南指北
禁止回车提交表单
前端小技术(不定期更新...)
输入框按回车，自动刷新页面？
中文输入法之input框回车后在不同浏览器间的差异（vue）
jQuery阻止回车form表单提交
刨根问底：HTML中form的隐式提交
键盘回车事件导致界面刷新的问题

方法1
使用js监听回车事件并阻止向上冒泡即可

  <form name="form1" method="post" onkeydown="init();">

  function init() {
      function keydownFn(e) {
          if(e.keyCode===13){
              e.preventDefault();
              e.stopPropagation();
          }
      }
      var $f = document.getElementById('xx');
      $f.addEventListener('keydown', keydownFn);
  }

方法2
当form中存在多个<input>时,回车将不会提交表单.因此,我们使用另一个<input>隐藏在页面中即可
```
  <input style="display:none;">
```

推荐方法2,简单粗暴.

禁止回车提交form表单
方法1使用js监听回车事件并阻止向上冒泡即可 function init() { functio...
form表单中只有一个input时，按enter键禁止刷新页面
当form表单中只有一个input时，按回车键表单会当成提交页面，禁止提交的方法： 1.在form表单中添加一个隐...
前端调试指南指北
1. 防止input回车提交表单Form 描述： form表单中存在button和table，table中含有in...
禁止回车提交表单
一般浏览器都提供了回车键提交表单功能，这样带来了不少便利。但是有时候，你的业务场景又不需要回车提交表单功能，因为这...
前端小技术(不定期更新...)
点击图片进行全屏演示，禁止上下滑动页面禁用form表单的回车提交事件 # 纯CSS实现文字超过n行后省略开启G...
输入框按回车，自动刷新页面？
原因在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车...
中文输入法之input框回车后在不同浏览器间的差异（vue）
需求，表单内只存在一个input框时，回车后需要触发表单提交事件问题一：回车后页面刷新解决方案：在form表...
jQuery阻止回车form表单提交
刨根问底：HTML中form的隐式提交
有时在HTML页面form的input里按了回车键会提交该表单,并且form的submit按钮的click事件也会...
键盘回车事件导致界面刷新的问题
本人在做一个搜索框响应回车的功能时，发现敲回车会导致界面刷新。问题原因：当使用Form表单时，回车默认自动提交...