none
关于Form中回车自动提交表单引起的问题 RRS feed

  • 问题

  • 我们正在做一个WebForm的项目,用asp.net framework 4.0

    QT有一个要求:

    1、一般页面中,按回车键页面不会自动提交表单

    2、当页面中的按钮、link、图片等元素,获得焦点时按回车键,页面的反应应该和这个元素被鼠标点击时一样

    请问这个怎么实现啊?

    我发现在页面上按回车时,页面会自动提交第一个type==submit && display!=none 的input。

    如果我在form的onkeypress事件上注册脚本return false的话,当有元素获得焦点时按回车,就会阻断元素本身的行为,比如在多行文本框上按回车,就没法换行了

    后来我想在form的onsubmit事件上注册脚本来return false,结果我发现这个地方没法从event里面判断到底是在按钮上按的回车引起的提交还是在textbox上按回车引起的默认提交。

    为方便大家调试,我写了段代码共大家使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title></title>
    	<style type="text/css" id="reset">
    		html{color:#000;background:#FFF;}
    		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
    		table{border-collapse:collapse;border-spacing:0;}
    		fieldset,img{border:0;}
    		address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
    		del,ins{text-decoration:none;}
    		li{list-style:none;}
    		caption,th{text-align:left;}
    		h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    		q:before,q:after{content:'';}
    		abbr,acronym{border:0;font-variant:normal;}
    		sup{vertical-align:baseline;}
    		sub{vertical-align:baseline;}
    		legend{color:#000;}
    		input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
    		input,button,textarea,select{*font-size:100%;}
    	</style>
    </head>
    <body>
    	<form id = "f" onkeypress="alert(0);" onsubmit="alert(event.srcElement)">
    		<div onkeypress="alert(1);">
    			<input type="text" onkeypress="alert(2)" /><br />
    			<textarea  rows="5" onkeypress="alert(3)"></textarea><br />
    			<input type="button" onkeypress="alert(4)" onclick="alert('click button');" value="button" />
    			<input type="submit" onkeypress="alert(5)" onclick="alert('click submit');" value="submit"/>
    		</div>
    	</form>
    </body>
    </html>
    2012年4月24日 9:44

全部回复

  • 看看document.activeElement合不合用?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title></title>
    	<style type="text/css" id="reset">
    		html{color:#000;background:#FFF;}
    		body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
    		table{border-collapse:collapse;border-spacing:0;}
    		fieldset,img{border:0;}
    		address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
    		del,ins{text-decoration:none;}
    		li{list-style:none;}
    		caption,th{text-align:left;}
    		h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    		q:before,q:after{content:'';}
    		abbr,acronym{border:0;font-variant:normal;}
    		sup{vertical-align:baseline;}
    		sub{vertical-align:baseline;}
    		legend{color:#000;}
    		input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
    		input,button,textarea,select{*font-size:100%;}
    	</style>
    	<script type="text/javascript">
    	function submitcheck() {
    		alert(document.activeElement.id);
    		return false;
    	}
    	</script>
    </head>
    <body>
    	<form id="f" onsubmit="return submitcheck();">
    		<div>
    			<input type="text" id="txt_single" onkeypress="" /><br />
    			<textarea id="txt_multi"  rows="5" ></textarea><br />
    			<input id="bt_button" type="button" value="button" onclick="this.form.submit();" />
    			<input id="bt_submit" type="submit" value="submit"/>
    		</div>
    	</form>
    </body>
    </html>

    2012年4月24日 10:24
  • document.activeElement 这个会有一个问题,有的时候form的提交是用js完成的,比如用__doPostBack

    这个时候你就很难说他的 document.activeElement 到底是谁了

    我现在找到了一个办法,虽然在项目中生效了,但是在我用来调试的那段html里面却没有生效,

    就是在form里面一开始就加一段

    <input type="submit" value="d" onclick="alert('xx');return false;" style=" />

    这样在项目中,当你在按回车时,会默认会执行这个按钮onclick事件,然后此时,我又return false了,所以就打断了提交。

    所以我想请问一下这个办法到底有没有科学依据?

    对了,还补充一点,我在项目中发现一个很奇怪的现象,让我怀疑我的回车默认提交是不是浏览器的自身行为,还是有什么地方认为控制了的。

    就是这个form中有一个updatepanel,然后里面有一个table,我发现,在table外面、Form里面点击一下鼠标,再按回车,就不会提交

    在table里面用用鼠标点一下就会提交。真是很费解啊。

    请高手指点。感激不尽。

    2012年4月25日 2:41
  • 你在submit button上跑onclick return false沒有用啦, 因為只要在有效的form control上按Enter鍵都是在提交的.

    要阻止提交只能從onsubmit上return false上去想. 其他control上的onclick大概只在判斷那一個control提交時, 設定global variable說明是那一個control提交的處理方法上有用吧...

    2012年4月25日 3:42
  • 我想你说在global varialble里面写值,应该是说在控件focus的时候写id进去吧,但是有个问题,

    就如我上面所说,我在form中的一个table里面点一下鼠标,再按回车,也会提交。

    所以,我应该在哪些元素的onfocus事件上面注册往global variable里面写值的函数呢?难道table上面也要注册?那div呢?span呢?

    所以,我现在觉得,我这个问题的原因其实并不是浏览器的默认行为,而是微软在asp.net里面封装了些什么东西引起的。

    再举一个项目中的例子,有一个页面里面有两个table,在其中一个上面点鼠标再按回车,就会提交这个table里面的唯一一个按钮,而在另外一个table里面按回车却什么反应也没有,我没有做任何控制,这两个table也是在同一个form里面。

    所以,我很好奇这个现象的真正原因到底是什么。

    谢谢。


    2012年4月26日 4:58
  • 由於在HTML4.01沒有明確定義form control在甚麼時候會做成提交, 我只能說你最好在每一種要支援的瀏覽器上都試一下.

    HTML5上倒是有找到明確定義, 可以參考.

    不過WebForm的話, 基本上就是依據HtmlForm.DefaultButton的說明了. 這部份沒有說明Table Cell中按Enter會被以Default Button提交, 這方面你可以在那留言要求澄清概念.



    • 已编辑 cheong00 2012年4月26日 5:40
    2012年4月26日 5:34
  • 我看过asp.net中form.defaultbutton的相关代码,其实他是通过在form的onkeypress事件上注册js实现的,我的页面中没有设置defaultbutton,所以,应该不是这个引起的。
    2012年4月26日 5:51
  • 
    

    (1)看了你的例子, 感觉理解有问题.IE浏览器采用冒泡型事件解决事件流.

    (1.1)焦点 落在 input type="text" 上点回车时,执行的是 intput type="text" ,div ,form 的 onkeypress 事件流,alert出 2 1 0
    (1.2) 焦点 落在 input type="button" 点回车,执行的是 input type="button",div ,form 的 onkeypress 事件流,因此按钮的回车事件流和点击事件不一样。
    (1.3) textarea 去掉form 和 onsubmit 的onkeypress事件 会自动换行

    (2) 当只有一个text框时,按回车会自动提交,
       即使在这个页面中增加file,checkbox,hidden等的控件,这个页面还是会自动提交。
       这是IE的一个缺省操作。如果想改变这个缺省操作,可以再增加一个text,然后隐藏这个text.

    (3) 没法从event里面判断到底是在按钮上按的回车引起的提交还是在textbox上按回车引起的默认提交,写了一个例子,解决类型判断问题,如下:

    <form id = "f" >
     <div>
         <input type="text" onkeydown="if(event.keyCode==13) controlonsubmit('text');"/><br />
         <input type="button" onclick="controlonsubmit('button');" value="button" />
     </div>
    </form>
    
        <script type="text/javascript">
            //controlType 表示出发提交事件的类型
            function controlonsubmit(controlType)
            {
                alert(controlType);
                document.forms[0].submit();
            }
        </script>

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    2012年5月15日 16:12