按enter键表单自动提交

2019-10-30 12:15:37 浏览数 (1)

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

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

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

代码语言:javascript复制
<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设置为不显示

我采用第二种,解决了

代码语言:javascript复制
<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方法

代码语言:javascript复制
//按下enter,提交数据
function doSubmit(ev){
	var keycode = getKeyCode(ev);
	if (keycode==13)
		//添加会员方法
		addMember();
}

0 人点赞