当前位置: 首页 > 编程笔记 >

网页中表单按回车就自动提交的问题的解决方案

太叔英锐
2023-03-14
本文向大家介绍网页中表单按回车就自动提交的问题的解决方案,包括了网页中表单按回车就自动提交的问题的解决方案的使用技巧和注意事项,需要的朋友参考一下

1、当form表单中只有一个<input type="text" name="name" />时按回车键将会自动将表单提交。


<form id="form1" action="post.php" method="post">   

    <input type="text" name="name" />   

</form>  

再添加一个


<input type="text" />  

按下回车将不会自动提交,但是页面上显示一个不知所云的输入框挺别扭,后从网上搜到两个解决办法:
(1)添加一个


<input style="display: none;" type="text" />  

不显示输入框,然后回车之后也不会提交:


<form id="form1" action="post.php" method="post">   

    <input type="text" name="name" />   

    <input style="display:none" />   

</form>  

(2)添加一个onkeydown事件,然后回车之后也不会显示:


<form id="form1" action="post.php" method="post">   

    <input type="text" name="name" onkeydown="if(event.keyCode==13) return false;"/>   

</form>

如果想添加回车事件可以在onkeydown事件中添加判断提交表单:


<form id="form1" action="post.php" method="post">   

    <input style="display:none" />   

    <input type="text" name="name" onkeydown="if(event.keyCode==13){gosubmit();}" />   

</form>

我们有时候希望回车键敲在文本框(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表单按回车自动提交表单的实现方法,包括了Form表单按回车自动提交表单的实现方法的使用技巧和注意事项,需要的朋友参考一下 1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。 如果不想让其自动提交可以这样做: 再添加一个<input type=

  • 本文向大家介绍用js提交表单解决一个页面有多个提交按钮的问题,包括了用js提交表单解决一个页面有多个提交按钮的问题的使用技巧和注意事项,需要的朋友参考一下 用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本,然后再执行相应的动作,比较简单。

  • 本文向大家介绍jsp中如何实现按下回车键自动提交表单,包括了jsp中如何实现按下回车键自动提交表单的使用技巧和注意事项,需要的朋友参考一下 为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助JS来达到要求。 代码如下: 解决方案: 把form表单放在一个div里面 ,然后对这个div监听事件$("#id").keydown(function (){}); #*#监听回车事件 #*

  • 本文向大家介绍JavaScript阻止回车提交表单的方法,包括了JavaScript阻止回车提交表单的方法的使用技巧和注意事项,需要的朋友参考一下 大家对回车键的功能应该比较熟悉,比如在windows系统的很多应用程序中,只要点击回车键就可以进入此程序或者开启某项功能,不过有时候我们希望阻止它的功能,例如在填写表单的时候,可能不小心点击回车键造成表单误提交,下面就来简单介绍一下如何实现此功能。代码

  • 本文向大家介绍表单提交错误后返回内容消失问题的解决方法(PHP网站),包括了表单提交错误后返回内容消失问题的解决方法(PHP网站)的使用技巧和注意事项,需要的朋友参考一下 表单提交错误后返回内容消失怎么办呐,今天就来分析解决一下这个问题。 状况概述: 做填写表单信息提交的时候会碰到一个问题就是当用户填写并提交表单后,程序判断不符合要求并返回,返回之后之前填写的表单信息会被清空了的情况。如果填写的信

  • 本文向大家介绍Web表单提交之disabled问题js解决方法,包括了Web表单提交之disabled问题js解决方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Web表单提交之disabled问题js解决方法。分享给大家供大家参考。具体分析如下: 例如,有如下表单 当我们提交表单时,在后台是获取不了pname数据的,因为该输入框的属性disabled。即能保存值也能保留用户不能输入这