(转)详解关于回车键触发表单提交的问题

最新推荐文章于 2023-05-17 18:17:09 发布

wp0423

最新推荐文章于 2023-05-17 18:17:09 发布

阅读量190

点赞数

分类专栏： JavaScript/CSS/HTML 文章标签： IE 浏览器 HTML

本文链接：https://blog.csdn.net/wp0423/article/details/83554374

版权

JavaScript/CSS/HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我们有时候希望通过敲击回车键在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，我们希望输入完关键词之后直接按回车键来提交表单；而有些复杂的表单，可能要避免回车键的触发行为，否则就会造成误操作。

要控制这些行为，不需要借助 JS，浏览器已经帮我们做好了这些处理，下面总结了几条规则：

1.如果表单里有一个 type="submit" 的按钮，回车键生效；
[color=red]2.如果表单里只有一个 type="text" 的 input，回车键生效； [/color]
3.如果按钮不是用的 input，而是用 button，并且没有加 type，IE 下默认为 type=button，FX 默认为 type=submit；
4.其他表单元素如 textarea、select 不影响。
在实际的应用中，要让表单响应回车键很容易，只要保证表单里有个 type="submit" 按钮就行。而当只有一个文本框又不希望响应回车键该怎么办呢？我的办法有点别扭，就是再写一个无意义的文本框，然后隐藏起来。根据第三条规则，我们在用 button 的时候，尽量显示声明 type 以使浏览器表现一致。

看下面的例子：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>submit</title>
</head>
<body>
<h1>本demo演示在input框中enter键是否触发提交表单，来自 www.abaonet.com</h1>
<h2>一个表单元素的时候，提交</h2>
<form action="http://www.abaonet.com/">
  <input type="text">
  <input value="提交" type="button">
</form>
<h2>一个表单元素的时候，不提交</h2>
<form action="http://www.abaonet.com/">
  <input type="text">
  <input style="display: none;" type="text">
  <input value="提交" type="button">
</form>
<h2>一个表单元素的时候，提交</h2>
<form action="http://www.abaonet.com/">
  <input type="text">
  <input style="display: none;" type="text">
  <input value="提交" type="submit">
</form>
<h2>多个表单元素的时候，提交</h2>
<form action="http://www.abaonet.com/">
  <input type="text">
  <input type="text">
  <input value="提交" type="submit">
</form>
<h2>多个表单元素的时候，不提交</h2>
<form action="http://www.abaonet.com/">
  <input type="text">
  <input type="text">
  <input value="提交" type="button">
</form>
<h2>用button元素时，FX和IE下有不同的表现</h2>
<form action="http://www.abaonet.com/">
  <input type="text">
  <input type="text">
  <button>提交</button>
</form>
</body>
</html>

wp0423

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(转)详解关于回车键触发表单提交的问题

我们有时候希望通过敲击回车键在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，我们希望输入完关键词之后直接按回车键来提交表单；而有些复杂的表单，可能要避免回车键的触发行为，否则就会造成误操作。要控制这些行为，不需要借助 JS，浏览器已经帮我们做好了这些处理，下面总结了几条规则：1.如果表单里有一个 type="submit" 的按钮...
复制链接

扫一扫