4.4 避免回车键自动提交表单

一般情况下，如果在一个表单中只定义了一个submit类型的提交按钮，那么当用户在表单输入完后按下回车键（Enter）就可以实现表单的提交操作。不过在有些情况下，这种看似便捷的功能也会带来不必要的烦恼，那就是如果用户进行了误操作（在还没有输入完表单的情况下，就误按回车键提交了表单）怎么办？这个时候就需要通过JavaScript来禁用回车键（Enter）功能了。

关于【代码4-3】的说明：

● 第13～17行代码通过<form>标签定义一个表单（formNoEnter），同时定义了action属性（form-no-enter.php）。其中，第16行代码通过<button type="submit">标签定义了一个提交按钮；表单中如果定义了该submit类型的按钮，如果不对回车键（Enter）进行屏蔽处理的话，那么当用户按下回车键后，默认就会执行提交表单的操作（读者可以自行测试一下）。

● 第21～27行代码为表单（formNoEnter）定义了按下按键onkeypress事件处理方法。其中，第23行代码通过判断回车键（Enter）按键ASCII编码（13）来屏蔽用户操作，这里要注意浏览器兼容性代码的写法；如果判断结果为“真”，就在浏览器控制台中输出一行提示信息（第24行代码），并通过返回false来屏蔽按键操作（第25行代码）。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图4.3所示。

图4.3 JavaScript避免回车键自动提交表单

如图4.3中箭头所示，当用户按下回车键（Enter）后，表单提交操作没有生效，而在浏览器控制台中显示了第24行代码定义的提示信息。