Form表单按回车自动提交表单的实现方法
1.form表单中只有一个input标签,按回车键将自动提交表单
当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。
<form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form>
如果不想让其自动提交可以这样做:
再添加一个<input type="text"/>按下回车将不会自动提交，但是页面上显示一个不知所云的输入框挺别扭，后从网上搜到两个解决办法：
(1) 添加一个<input type='text' style='display:none'/>不显示输入框，然后回车之后也不会提交：
<form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> <input style='display:none' /> </form>
(2) 添加一个onkeydown事件，然后回车之后也不会显示：
<form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' onkeydown='if(event.keyCode==13) return false;'/> </form>
ps: 我对于这个 event.keyCode==13表示没有看懂,只是理解为判断条件,但具体还是不懂.如果阁下明白,还请不吝赐教.
如果想添加回车事件,可以在onkeydown事件中添加判断提交表单：
<form id='form1' action='a1.jsp' method='post'>
<input style='display:none' />
<input type='text' name='name' onkeydown='if(event.keyCode==13){gosubmit();}' />
</form>
2.关于是否需要自动提交
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。
要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
如果表单里有一个type=”submit”的按钮，回车键生效。
如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。
以上所述是小编给大家介绍的Form表单按回车自动提交表单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在开发中，我们会经常使用 JSON.stringify(object) 来序列化对象，但JSON.stringify方法除了了第一个参数外，还有其它参数可用，今天我们一起来看看这些参数是做啥的2023-05-05
这篇文章主要介绍了JavaScript、C# URL编码总结,注意包括了encodeURI、decodeURI、encodeURIComponent、decodeURIComponent等使用需要的朋友可以参考下2017-01-01
这篇文章主要介绍了JavaScript实现查找字符串中第一个不重复的字符,需要的朋友可以参考下2014-12-12
在现代前端开发中,JavaScript事件处理是一个至关重要的部分,它能够使网页与用户交互,实现丰富的交互体验,然而,对JavaScript事件机制的深入理解是开发者成为优秀前端工程师的关键所在,本文将全面剖析JavaScript事件机制,需要的朋友可以参考下2023-12-12
javascript将json格式数组下载为excel表格的方法
下面小编就为大家分享一篇javascript将json格式数组下载为excel表格的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
这篇文章主要介绍了Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要介绍了JS鼠标拖拽实现方法,实例分析JavaScript鼠标事件及页面元素属性动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
JavaScript中的splice主要用来对js中的数组进行操作，包括删除，添加，替换等。这篇文章主要介绍了JavaScript中的splice方法用法详解的相关资料,需要的朋友可以参考下2016-07-07
uni-app的h5页面中onHide/onUnload方法不触发的问题解决方法
uni-app的页面的生命周期包括onInit、onLoad、onShow、onReady、onHide和onUnload等几个阶段,这篇文章主要给大家介绍了关于uni-app的h5页面中onHide/onUnload方法不触发的问题解决方法,需要的朋友可以参考下2023-12-12
今天小编就为大家分享一篇获取layer.open弹出层的返回值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论