表单中只有一个文本框时，回车页面刷新错误

最新推荐文章于 2020-10-23 14:03:06 发布

原创最新推荐文章于 2020-10-23 14:03:06 发布 · 202 阅读

CC 4.0 BY-SA版权

本文介绍了两种解决网页表单中输入数据后点击回车导致页面刷新的问题的方法。方法一是在文本域元素中加入onkeydown或onkeypress事件，阻止默认行为；方法二是在form中加入隐藏文本域，避免提交操作。同时，文章解释了为何第二种方法不适用于含有提交按钮的情况。

在一个也没中如果一个form标签中只有文本框<input type="text" />,当在输入完数据后点击回车，会发现页面进行了刷新，代码如下：

<body>	
		<form>
			<input type="hidden" id="contextPath" name="contextPath" value="<%=request.getContextPath()%>" />
			<textarea rows="2" cols="2" name="test"></textarea>
			<input type="text" name="noticeNo" id="noticeNo"/>
		</form>		
</body>

有如下解决方法：

1.在文本域元素中加入onkeydown或者onkeypress事件，判断如果用户点击了回车就阻止默认的行为。

<body>		
		<form>
			<input type="textsdfsd" name="noticeNo"  onkeypress="if(event.keyCode==13||event.which==13){return false;}" />	
		</form>
</body>

2.在form中在加入一个隐藏的文本域

<body>	
		<form>
			<input type="hidden" id="contextPath" name="contextPath" value="<%=request.getContextPath()%>" />
			<textarea rows="2" cols="2" name="test"></textarea>
			<input type="text" name="noticeNo" id="noticeNo"/>
			<input type="text" name="test" style="display:none"/>
		</form>		
</body>

说明：大家可以发现，里面是没有提交按钮的即

<input type="sumit" />,要是里面有提交按钮的话，第二种方法时不使用的，只能使用第一种方法，因为通过查看你会发现，当你点击一个表单时，或者表单的任何元素会发现，提交按钮时激活状态，所以单点击回车时就执行了提交操作。