Form表单input回车提交问题

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

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

现在有三种解决方案:

1.全局禁用回车事件

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

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

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


function ClearSubmit(e) {
    if (e.keyCode == 13) {
        return false;
    }
}

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

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

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

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

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

 

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




	
	submit例子 - aspxhome.com


	

本demo演示在文本框中按enter键是否触发提交表单

默认情况下,一个文本框的时候,提交,不管按钮type是submit还是button

一个文本框的时候怎么才能做到不提交,方法是加一个隐藏掉的文本框

只要有type为submit的按钮存在,一个文本框还是多个文本框都提交

只要有type为submit的按钮存在,一个文本框还是多个文本框都提交

多个文本框的时候,不提交,用type为button的按钮就行啦

用button元素时,FX和IE下有不同的表现

radio和checkbox在FX下也会触发提交表单,在IE下不会

type为image的按钮,等同于type为submit的效果

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

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

 

你可能感兴趣的:(HTML)