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

更多时间：2013-10-8 类别：Web前端浏览量：3933

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

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

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
}
});
});

标签：js 回车键提交表单

上一篇：ExtJs 中Viewport 的使用

下一篇：接到面试通知后必须做哪些准备

您可能感兴趣

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

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

热门推荐

排行榜