十二月
11
2014

笔记001 Form表单回车响应要点

Form表单.jpg

前端开发不可避免地要接触到Form表单,Hy369写了几年的页面了,自认为对Form表单比较了解的情况下,却还是出现了问题。而且这个很容易就遇到的问题,居然那么碰巧地在前几年里被避开了,直到现在才遇到,不得不说很是让人汗颜。

这一次Form表单中遇到的是什么样的问题呢?

大家都知道,在一个表单的文本框里面敲回车键的时候,表单便会进行提交操作,并且触发onsubmit事件(特殊说明:textarea里面敲回车的时候,不会提交表单,但可以通过Javascript实现ctrl+回车的方式提交)。Hy369也一直知道这一点,并且想当然地认为,只要在input里面敲击回车,它所在的Form表单便会提交,事实上如何呢?不妨写几个例子测试一下。

测试案例1:

测试案例1中,我们不设submit按钮,只添加一个input文本框,具体代码见代码1。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试没有Submit按钮的表单提交</title>
<style type="text/css">
    * { margin:0; padding:0; font-family:Arial, 'Microsoft Yahei'; font-size:12px;}
    p { margin-bottom:16px;}
</style>
</head>
<body>
<div style="width:400px; height:200px; border:1px #DBDBDB solid; margin:100px 0 0 100px; padding:20px; border-radius:5px;">
    <form name="testForm" action="" method="post" onsubmit="console.log('onsubmit已经触发');return false;">
        <p><label><span style="margin-right:10px;">测试字段1:</span><input type="text" name="field1" value="" /></label></p>
    </form>
</div>
</body>
</html>
代码1

页面效果如图1所示,若表单进行提交操作,则会在浏览器的控制台中输出“onsubmit已经触发”字样。然后Hy369激活“测试字段1”的文本框,然后敲击回车键,结果控制台中产生了输出,说明回车键有效。输出结果如图2所示。

案例2.jpg

图1

结果1.jpg

图2

测试案例2:

测试案例2(见代码2)则是在案例1的基础上添加了一个input文本框,样式如图3所示,结果按照案例1的方式敲击回车的时候,表单却不提交了。最初Hy369还以为是其它代码干扰了Form表单的提交,所以把Form表单以外的所有代码都给删除掉,结果依然不提交。于是Hy369就不得不怀疑是Form表单本身出现了问题。苦苦思索了许久,又找了不少度娘的麻烦,最后突然想到,会不会是因为没有submit按钮的原因呢?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试没有Submit按钮的表单提交</title>
<style type="text/css">
    * { margin:0; padding:0; font-family:Arial, 'Microsoft Yahei'; font-size:12px;}
    p { margin-bottom:16px;}
</style>
</head>
<body>
<div style="width:400px; height:200px; border:1px #DBDBDB solid; margin:100px 0 0 100px; padding:20px; border-radius:5px;">
    <form name="testForm" action="" method="post" onsubmit="console.log('onsubmit已经触发');return false;">
        <p><label><span style="margin-right:10px;">测试字段1:</span><input type="text" name="field1" value="" /></label></p>
        <p><label><span style="margin-right:10px;">测试字段2:</span><input type="text" name="field2" value="" /></label></p>
    </form>
</div>
</body>
</html>
代码2

案例1.jpg

图3

测试案例3:

想到了自然就要测试一下,于是赶紧给表单添加了一个submit按钮,代码见代码3,效果见图4。带着忐忑的心情按照上面的步骤测试一下,欣喜地发现表单提交了,同时又不得不感到汗颜。这个问题犯得可真够二的。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试没有Submit按钮的表单提交</title>
<style type="text/css">
    * { margin:0; padding:0; font-family:Arial, 'Microsoft Yahei'; font-size:12px;}
    p { margin-bottom:16px;}
</style>
</head>
<body>
<div style="width:400px; height:200px; border:1px #DBDBDB solid; margin:100px 0 0 100px; padding:20px; border-radius:5px;">
    <form name="testForm" action="" method="post" onsubmit="console.log('onsubmit已经触发');return false;">
        <p><label><span style="margin-right:10px;">测试字段1:</span><input type="text" name="field1" value="" /></label></p>
        <p><label><span style="margin-right:10px;">测试字段2:</span><input type="text" name="field2" value="" /></label></p>
        <input type="submit" value="提交" style="padding:0 20px;" />
    </form>
</div>
</body>
</html>
代码3

案例3.jpg

图4

测试案例4

需要解决的问题总算解决了,但是有些朋友可能要问了。有些表单根本就不需要用到submit按钮的,该怎么办。这个倒是不难了,把submit按钮隐藏即可。但是要注意,这里所谓的隐藏不是display:none,而是将按钮浮动,显示到浏览器可视区域以外的地方。代码见代码4。得到的效果和图3是一样的。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试没有Submit按钮的表单提交</title>
<style type="text/css">
    * { margin:0; padding:0; font-family:Arial, 'Microsoft Yahei'; font-size:12px;}
    p { margin-bottom:16px;}
</style>
</head>
<body>
<div style="width:400px; height:200px; border:1px #DBDBDB solid; margin:100px 0 0 100px; padding:20px; border-radius:5px;">
    <form name="testForm" action="" method="post" onsubmit="console.log('onsubmit已经触发');return false;">
        <p><label><span style="margin-right:10px;">测试字段1:</span><input type="text" name="field1" value="" /></label></p>
        <p><label><span style="margin-right:10px;">测试字段2:</span><input type="text" name="field2" value="" /></label></p>
        <input type="submit" value="提交" style="width:0; height:0; font-size:0; overflow:hidden; position:absolute; left:-9999px;" />
    </form>
</div>
</body>
</html>
代码4

非特殊注明博文为 爱PHP吧(www.iphp8.com)原创内容,转载请注明原文地址:http://www.iphp8.com/?post=14

评论

发表评论:

(选填)

(选填)