`
javacastle
  • 浏览: 815 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

回车提交表单的集中情况

    博客分类:
  • 1
阅读更多
今天遇到一个很变态的问题,由于一个input框要用suggest ,会用到回车事件。
但是在一个form里面,按回车的时候我的form自动提交了,我靠,怎么改动不行。
把submit改成button,也不行。蛋蛋的,看样子是自动执行了form.submit()

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




我们有时候希望回车键敲在文本框(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添加背景图合适些。
实际应用的时候,要让表单响应回车键很容易,保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办 呢?我的方法有点别扭,就是再写一个无意义的文本框,隐藏起来。根据第3条规则,我们在用button的时候,尽量显式声明type以使浏览器表现一致。
做了一个 demo (点击查看) 列出了一些例子。
本文链接:http://www.blueidea.com/tech/web/2009/6390.asp
分享到:
评论

相关推荐

    js判断+ 键盘

    // 阻止回车提交表单 console.log('Enter pressed, default action prevented'); } }); ``` 6. **跨浏览器兼容**: 虽然`event.key`在现代浏览器中广泛支持,但在一些老版本的浏览器中可能需要使用`event....

    小刀娱乐网源码2018版 v4.17.rar

    弹窗对话框是系统对管理员做出操作的回应,通常情况下可点击弹窗对话框上面的确定按钮,同时也可以敲击空格或回车键进行快速确定操作。 5、后台功能面板: 后台的功能面板中所有需要鼠标点选或键盘录入的地方都...

    JS实现Enter键跳转及控件获得焦点

    本文主要讲述如何使用JavaScript实现当用户在网页中按下Enter键时,不仅能够触发某个动作(例如提交表单),还能让特定的控件获得焦点。通过使用jQuery,我们能够编写简短的代码来处理不同浏览器中的键盘事件差异,...

    web安全之XSS攻击及防御pdf

    - 创建一个HTML文件`index.html`,其中包含一个表单,用户可以在表单中输入自己的名字,并提交给服务器端的`xss.php`文件。 - `xss.php`文件将直接显示用户提交的名字,没有进行任何过滤或转义处理。 ```html <!-- ...

    2021-2022计算机二级等级考试试题及答案No.13477.docx

    表单提交方式 - **知识点**: 将表单数据以字符串的方式附加在网址后面返回服务器端,应将表单的`METHOD`属性设置为`GET`。 #### 21. Excel中单元格的操作 - **知识点**: 使用`Del`键只能删除单元格中的数据,而...

    隐蔽的ASP后门 大家可以查看下

    在此文档中,描述了一个ASP后门代码片段,攻击者可以利用它在服务器上存储日志文件,记录敏感信息,比如登录凭证、表单提交数据等。通过在特定ASP文件中插入这样一段代码,攻击者便可以悄无声息地控制服务器。此外,...

Global site tag (gtag.js) - Google Analytics