首页  ·  知识 ·  云计算
回车自动提交禁止回车自动提交web开发.
长平狐    综合  编辑:dezai   图片来源:网络
回车自动提交 禁止回车自动提交 web开发 .
 今天遇到一个很变态的问题,由于一个input框要用suggest ,会用到回车事件。

但是在一个form里面,按回车的时候我的form自动提交了,我靠,怎么改动不行。

把submit改成button,也不行。蛋蛋的,看样子是自动执行了form.submit()



结果从网上得到某位大侠的文章,搞定,特立此文留念。原文如下:





我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:

  1. 如果表单里有一个type=”submit”的按钮,回车键生效。
  2. 如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。
  3. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
  4. 其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。
  5. type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

实际应用的时候,要让表单响应回车键很容易,保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢?我的方法有点别扭,就是再写一个无意义的文本框,隐藏起来。根据第3条规则,我们在用button的时候,尽量显式声明type以使浏览器表现一致。

 

 

这个位高人还留下来一个 demo (点击查看) 列出了一些例子。

 

 

转载: http://shake863.javaeye.com/blog/363809

 

 

这段是针对ASP.NET开发的

 

1.

深层次来说这不是 ASP.NET 的问题, 而是 html form 的 submit 按钮就是如何设计的。

当你的光标焦点进入某个表单元素的时候,会激活该表单中第一个(流布局顺从左到右,从上至下) type=submit 的按钮(假如有),等待响应回车事件,并提交该form

你可以测试一下代码:

<form action="">

<input type="text" />

<input type="submit" value="submit" />

</form>

<form action="">

<input type="text" />

<input type="button" value="submit" />

</form>

2.

在 ASP.NET 2.0 中 button 默认呈现为 <input type=submit> 此时不要额外脚本提交form ,submit 按钮就是设计用来提交form

而在 1.x 中则呈现为 <input type=button onclick=_doPostBack(...) /> 此普通 button 不具备 submit 的上述默认行为

3.

禁用此默认行为有法二

1.

设置 form 元素的 defualtButton 为你希望响应回车的真正按钮如下

<form id="form1" runat="server" defaultbutton="Button1">

注意 defaultButton = < <TargetButton.ID>> 因此这对复合控件中比如模板的 Button 可能无效(未测试)

2.

修改 button 呈现方式 UseSubmitBehavior="false"

<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" UseSubmitBehavior="false" />

(csdn 晓风残月)

 

另外可以通过控制焦点的方式,过滤回车实践,需要记录一笔的是,获取当前页面焦点所在控件的ID:

document.activeElement

 

对于Asp.Net.我们在TextBox1中输入内容后,按下enter键后,就执行Button1的click方法。那么在page_load事件方法中写。

TextBox1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('"+Button1.UniqueID+"').click();return false;}} else {return true}; ");

本文作者:长平狐 来源:网络
CIO之家 www.ciozj.com 微信公众号:imciow
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读