您的位置:首页 > Web前端 > 其它

如何禁止按回车键提交表单

更多 2013/10/8 来源:javascript学习浏览量:3638
学习标签: js 回车键 提交表单
本文导读:禁止按回车键提交表单,有时候我们按回车键提交很实用,但容易使表单出错,所以我们不想让用户按了回车键就提交表单,那该怎么办呢?

Asp.Net 的 WebForm 中光标在文本框时按回键默认就会提交表单,多数时候确实带来了很好的用户体验,输入数据后,手不用离开键去乱摸鼠标就能完成表单的提交。但总有例外不想要这种默认行为,一定有的,你遇到了就知道的,比如想在文本框中回车做别的事情,那就要点技巧的。

很多人可能会告诉你对文本框加个事件,回车的时候把 keyCode 由 13 变为 9(其实 keyCode 变为 9 是使回车相当于 Tab 键的功能),不过还未完事,你并没有阻止事态进一步蔓延,Form 还是提交了。


 
JScript 代码   复制

$(document).ready(function() {
$("#txt").keypress(function(event) {
if (event.keyCode == 13) {
event.keyCode = 9;

//do some of your things
}
});
});


 

其实你要了稍加解浏览器的冒泡的事件模型,知道怎么适时的阻止浏览器的默认行为,就会很容易解决这样的问题,在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

 

1..停止事件冒泡

 
JScript 代码   复制

//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
return false;

 

2.阻止浏览器的默认行为

 
JScript 代码   复制

//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.preventDefault )
//阻止默认浏览器动作(W3C)
e.preventDefault();
else
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
return false;

 



这里就是要在文本框的键盘事件中当回车时阻止浏览器的下一步默认行为,高版本的浏览器都趋于规范化了,所以可以 IE7 及以上版本或其他的浏览器中都可以用 e.preventDefault(); 方法了。在你的网页中为文本框附加下面代码就行了:

 

JScript 代码   复制

$(document).ready(function() {
$("#txt").keypress(function(event) {
if (event.keyCode == 13) {

event.preventDefault();

//do some of your things
}
});
});

 

 

收藏
142
很赞
304