表单踩坑案： input 回车自动提交

[ReAlign]

---

title: 表单踩坑案 —— input 回车自动提交
date: 2017-08-19

表单踩坑案： input 回车自动提交

案件再现

• 地点：a.com/b.do?c=1 (化名，以下都是)
• 人物：
  • form - 无 action
  • input - type='text'
  • button - type='button'
  • 其他
• 经过：在 input 输入关键字 123，回车
• 预期：触发查询请求 /query.do?key=123
• 表现结果：页面重载，且 url 变为 a.com/b.do?

案情分析

在 Network 中查看回车之后发生了什么：页面重载的同时，查询请求也触发了，但页面重载丢掉了全部参数，现场如下：

所以，页面 url 变成了下面这样：

（N脸懵X）

疑点 & 动机

• 疑点
  • 异步请求是发出去了，但为什么自己刷页面了？
  • 为什么不但刷页面了，还把参数搞没了？
• 动机
  • 快捷提交表单？(好心办坏事？)

猜想

表单正常情况下，会在 submit 的时候进行提交，跟这个有关系？但没有 action ，也没有 submit 。所以：表单会在某些特殊情况下，回车的时候不声不吭（划重点）提交？

搜证

以下均摘自 http://www.w3school.com.cn/

1. action 缺失，则当前页面 url 会被当成 action:
   

2. input 中 name 不仅是标识作用，在表单提交中，有 name 的 input 值才能被正确提交:
   

3. 下面是正常 form + input 提交的例子:
   

验证猜想

结合搜到的证据，进行猜想验证，过程省略。（很枯燥的，各种试，大致就是在表单元素的各种组合下，回车，看表单是否会提交）

结论

注：下面结论中所有的回车是针对可输入类型的 input 而言的；另，存不存在 textarea ，不影响结果。

（敲黑板，下面是重点）

1. 单个 input
   • 无论 type 是什么类型，回车自动提交
2. 多个 input
   • 当存在 type="submit" (type="image") 时，无论另外有几个 input，type 为何种类型，回车自动提交
   • 可输入类型的 input 只有一个时，回车自动提交
3. 当存在大于一个可输入 input，且没有 type="submit" 时，回车不会自动提交

• 注：type="image" 这个鬼东西第一次见，w3school 的解释是：

<input type="image" /> 定义图像形式的提交按钮。
必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。

解决办法

1、 （推荐）添加一个 display:none 的可输入类型 input：

<!-- 这个地方不能用 type="hidden" -->
<input style='display:none' />

2、（不推荐）监听键盘事件

if(event.keyCode == 13) {
    return false;
}

3、（不推荐）重写 onsubmit

<form onsubmit="return false;">
...
</form>

• 注：当存在 type="submit" 的 input 时，只能通过监听键盘事件去阻止。（要是就是要通过action + enter 提交表单，就当没说，你高兴就好）

---

多说一句

表单中存在 没有 type 的 <button> ，只有 IE 下默认为 type=button，Chrome、FF、Safari、Opera 默认为 type=submit。（这两种实现，孰优孰劣，留待各位评说）

by：ReAlign

[Danvic Wang]

感谢，找到了之前一直存在的一个 bug 的解决方法