HTML防止input回车提交表单

最近在做一个小需求时，发现了一个问题：当form表单中，存在一个button，在input中按回车会自动触发form提交，很是郁闷，经过查询资料，特总结如下：

自动提交情况说明：

默认情况下，单个输入框，无论按钮的type="submit"还是type="button"类型，回车即提交。
当type="submit"时，无论有几个type="text"输入框，回车均表示提交。（<button>按钮默认的type为submit）
当type="button"时，且存在多个输入框，回车不提交。（button）

解决方案：

解决单个输入框的回车即提交问题，可以增加一个隐藏的input="text" display='none'; 然后type类型为button。
在form表单或input中加入：οnkeydοwn="if(event.keyCode==13){return false;}"

实例一：

<!-- enter会自动提交数据 -->
<form action="www.baidu.com" method="post"><input type="text" value="" /><input type="text" value="" /><button>提交</button><!--等价于<button type="submit">提交</button>或<input type='submit' value='提交'>-->
</form>

实例二：

<!-- enter不会自动提交数据 -->
<form action="www.baidu.com" method="post"><input type="text" value="" /><input type="text" value="" /><button type="button">提交</button><!-- 等价于<input type='button' value='提交'> -->
</form>

实例三：

<!-- enter不会自动提交数据 -->
<form action="www.baidu.com" method="post" onkeydown="if(event.keyCode==13){return false;}"><input type="text" value="" /><input type="text" value="" /><button>提交</button><!-- 或在对应input上添加，同时建议取消自动填充，因为mac下会有问题<input type="text" value="" autocomplete="off" onkeydown="if(event.keyCode==13){return false;}" /> -->
</form>

HTML防止input回车提交表单相关推荐

html 禁用回车提交,HTML防止input回车提交表单
原链接:https://blog.csdn.net/ligang2585116/article/details/44699567 自动提交情况说明: 1.默认情况下,单个输入框,无论按钮的type=& ...
不同浏览器对回车提交表单的处理办法(转载)
不同浏览器对回车提交表单的处理办法(转载) 对下面的一段代码,刚开始使用 onClick 事件,在 IE 6.0 中,要按"提交"按扭才起做用,直接回车不行,而在 firefox ...
jq html 回车提交表单,jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,documen ...
表单元素聚焦状态回车提交表单问题小记
表单元素聚焦状态回车自动提交表单问题情景多个表单元素且有个button的type没有写,或者写了type=submit; 当表单只有一个元素方案问题1: 将button 加上type=butt ...
jquery输入框按下回车提交表单
jQuery on()方法是官方推荐的绑定事件的一个方法 $('#password').on('keydown', function(e) {// 短路语法,当e.keyCode == 13成立的时候 ...
html form提交前md5,javascript实现MD5加密-JavaScript获取HTML元素的三种方...-兼容IE与firefox的js回车提交表单_169IT.COM...
本文介绍JavaScript获取网页中HTML元素的三种方法,供大家学习参考. 1.getElementById() getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义 ...
JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）
提交表单使用< input > 或 < button >标签都可以定义提交按钮,只要将type属性值设置为"submit"即可,而图像按钮则是通过将 &l ...
Form表单回车(Enter)提交表单问题
Form表单回车(Enter)提交表单问题在Form表单中input会自动响应回车事件.这是表单的默认提交动作. 表单的提交行为,可以用两种方式定义,一是form表单自身,二是form表单的but ...
[js] 如何按回车自动提交表单
[js] 如何按回车自动提交表单监听keydown事件并且判断按键代码为13,触发提交表单按钮或执行提交表单方法个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...

HTML防止input回车提交表单

自动提交情况说明：

解决方案：

HTML防止input回车提交表单相关推荐

最新文章

热门文章