按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();  }