按enter键表单自动提交

• 2019 年 10 月 30 日
• 筆記

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/luo4105/article/details/53185494

当表单只有一个为text的input时，在该input按下enter键，表单会自动提交，我以前的代码，只有一个为text的input，一回车就提交表单

<form id="gform" action="${ROOT_PATH}/tdp/dev/zbfa/toChooseAppointMember.do" method="post">  	<input type="hidden" name="hynames" id="hynames" value="$!group.hynames"/>  	<input type="hidden" name="hydms" id="hydms" value="$!group.hydms"/>  	<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="Plright_Sch">  		<tr>  		<td align="right">添加会员：</td>  			<td align="left">  				<!-- 只有一个input，所以按enter自动提交表格 -->  				<input type="text" name="addhyname" id="addhyname" value="$!{query.addhyname}" maxlength="125"/>  			</td>  		</tr>  	</table>  </form>

找到两个解决办法

1.在input添加按键监控，一旦是enter，就返回false。

2.在表单中添加一个type为text的input，css设置为不显示

我采用第二种，解决了

<form id="gform" action="${ROOT_PATH}/tdp/dev/zbfa/toChooseAppointMember.do" method="post">  	<input type="hidden" name="hynames" id="hynames" value="$!group.hynames"/>  	<input type="hidden" name="hydms" id="hydms" value="$!group.hydms"/>  	<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="Plright_Sch">  		<tr>  			<td align="right">添加会员：</td>  			<td align="left">  				<!-- 只有一个input，所以按enter自动提交表格 -->  				<input type="text" name="addhyname" id="addhyname" value="$!{query.addhyname}" maxlength="125" οnkeyup="doSubmit(event);"/>  				<!-- 防止按enter键表单自动提交 -->  				<input type="text" style="display:none">  			</td>  		</tr>  	</table>  </form>

最后给我给input加上按键监控，按下enter键调用我需要的js方法

//按下enter，提交数据  function doSubmit(ev){  	var keycode = getKeyCode(ev);  	if (keycode==13)  		//添加会员方法  		addMember();  }