Form表单input回车提交问题

最新推荐文章于 2024-07-11 16:15:56 发布

dz45693

最新推荐文章于 2024-07-11 16:15:56 发布

阅读量3.1k

点赞数

分类专栏： HTML

HTML 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

问题：文本框输入完成后点击回车页面刷新
问题出在form上，当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容，就会发生刷新事件。

发现问题所在就好解决问题了。

现在有三种解决方案：

1.全局禁用回车事件

function document.onkeydown() {
        var e = event.srcElement;
        if (event.keyCode == 13) {
            return false;
        }
}

但是这样会出现想要使用回车又不能用的尴尬用提。

2.单独去掉输入框的回车事件的方法

<input type="text"  onkeydown="return ClearSubmit(event)" />
function ClearSubmit(e) {
    if (e.keyCode == 13) {
        return false;
    }
}

这样就不会上面的那种尴尬情况，但是也需要创建一个方法，代码臃肿。

3.增加一个隐藏的输入框

<input id="hiddenText" type="text" style="display:none" />

增加了一个隐藏的输入框之后，表单的文本框不再是唯一的，回车不会触发提交事件。本人喜欢这个。

4. 如果 onsubmit 句柄返回 fasle，表单的元素就不会提交。如果该函数返回其他值或什么都没有返回，则表单会被提交。
由于 onsubmit 句柄可以取消表单的提交，所以它对于进行表单验证是十分理想的；

这样的话，修改form的onsubmit事件可以让敲入回车的时候执行我们想要的操作而不跳转到action所指定的url，如下：

 <form action="myurl" onSubmit="fun1();return false;">

浏览器在表单提交上的默认行为，这种情况一般都在什么时候发生呢，以ie为例，讲讲它在什么情况下会发生这样的现象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK">
	<title>submit例子 - aspxhome.com</title>
</head>
<body>
	<h1>本demo演示在文本框中按enter键是否触发提交表单</h1>
	<h2>默认情况下，一个文本框的时候，提交，不管按钮type是submit还是button</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="button" value="提交">
	</form>
	<h2>一个文本框的时候怎么才能做到不提交，方法是加一个隐藏掉的文本框</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text" style="display:none">
		<input type="button" value="提交">
	</form>
	<h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="submit" value="提交">
	</form>
	<h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text">
		<input type="submit" value="提交">
	</form>
	<h2>多个文本框的时候，不提交，用type为button的按钮就行啦</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text">
		<input type="button" value="提交">
	</form>
	<h2>用button元素时，FX和IE下有不同的表现</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text">
		<button>提交</button>
	</form>
	<h2>radio和checkbox在FX下也会触发提交表单，在IE下不会</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="radio" name="a">
		<input type="checkbox" name="b">
		<input type="checkbox" name="c">
		<input type="button" value="提交">
	</form>
	<h2>type为image的按钮，等同于type为submit的效果</h2>
	<form action="http://www.csdn.net">
		<input type="text">
		<input type="text">
		<input type="image" src="/images/logo.gif">
	</form>
</body>
</html>

们知道了Enter键提交的原理之后我们很明显就有了相对应的解决方法
通常我们用的方法有两种:
1.我们在form标签中来禁止enter键提交

<form name="form" action="" method="post" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();">

2.我们可以在form中增加一个隐藏的输入框

dz45693

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录